/*
 * Fran Susín: cabecera Elementor (escritorio)
 *
 * Activación: asignar la clase CSS "fs-header-desktop" al contenedor
 * que contiene los dos contenedores interiores «Imagen» y
 * «Menú WordPress + Carrito del menú».
 *
 * Reglas limitadas a ese contenedor para no alterar catálogos,
 * checkout ni la cabecera independiente de móvil.
 */
@media (min-width: 1025px) {
  .fs-header-desktop {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 14px clamp(16px, 2.4vw, 44px) !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Elementor usa .e-con-inner si el contenedor está en modo «Caja». */
  .fs-header-desktop > .e-con-inner {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(12px, 1.5vw, 28px) !important;
    width: 100% !important;
    max-width: 1480px !important;
    margin-inline: auto !important;
  }

  /* ...y los hijos directos si se configura «Ancho completo». */
  .fs-header-desktop:not(:has(> .e-con-inner)) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: clamp(12px, 1.5vw, 28px) !important;
  }

  /* Primera columna: logo. */
  .fs-header-desktop > :is(.e-con-inner, .e-con):first-child > .e-con:first-child,
  .fs-header-desktop > .e-con:first-child {
    flex: 0 0 clamp(165px, 14vw, 210px) !important;
    width: clamp(165px, 14vw, 210px) !important;
    max-width: 210px !important;
    min-width: 0 !important;
    align-self: center !important;
  }

  .fs-header-desktop > :is(.e-con-inner, .e-con):first-child > .e-con:first-child img,
  .fs-header-desktop > .e-con:first-child img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* Segunda columna: menú + carrito, ambos en una misma fila. */
  .fs-header-desktop > .e-con-inner > .e-con:last-child,
  .fs-header-desktop > .e-con:last-child {
    box-sizing: border-box;
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(8px, 1vw, 20px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Menú (primer widget) ocupa el espacio disponible. */
  .fs-header-desktop > .e-con-inner > .e-con:last-child > .elementor-widget:first-child,
  .fs-header-desktop > .e-con:last-child > .elementor-widget:first-child {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Carrito (segundo widget) ocupa únicamente el espacio necesario. */
  .fs-header-desktop > .e-con-inner > .e-con:last-child > .elementor-widget:last-child,
  .fs-header-desktop > .e-con:last-child > .elementor-widget:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* Elementor Menú WordPress (Nav Menu). Mantener una sola línea. */
  .fs-header-desktop .elementor-nav-menu--main .elementor-nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    white-space: nowrap !important;
  }

  .fs-header-desktop .elementor-nav-menu--main .elementor-item {
    font-size: clamp(10px, .8vw, 12px) !important;
    padding: 10px clamp(5px, .55vw, 10px) !important;
    white-space: nowrap !important;
  }

  /* No modificar el comportamiento ni la posición del submenú. */
  .fs-header-desktop .elementor-nav-menu--dropdown {
    white-space: normal;
  }
}