/* ==========================================================================
   SALSAS CHILANGAS · ELEMENTOR OVERRIDES
   --------------------------------------------------------------------------
   Pequeños ajustes para que los widgets de Elementor adopten el sistema sin
   pelear con el control visual del editor. Filosofía: tocar lo mínimo, dejar
   que el usuario siga configurando tamaños/colores en Elementor.
   Solo se usa !important donde la especificidad de Elementor lo obliga.
   ========================================================================== */

/* ---- Anchos de contenido alineados a los tokens -------------------------
   Si NO defines Content Width en Site Settings, estos valores dan coherencia.
   Comenta este bloque si gestionas el ancho desde Elementor.
-------------------------------------------------------------------------- */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con-boxed > .e-con-inner {
  max-width: var(--container-max);
}

/* ---- Heading ------------------------------------------------------------ */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  color: var(--text-primary);
  letter-spacing: -.01em;
}

/* ---- Text editor -------------------------------------------------------- */
.elementor-widget-text-editor {
  font-family: var(--font-body);
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

/* ---- Image: radio de marca por defecto (suave) -------------------------- */
.elementor-widget-image img {
  border-radius: var(--radius-md);
}
/* Escape: añade la clase "sc-img-flat" al widget si quieres esquinas rectas */
.elementor-widget-image.sc-img-flat img { border-radius: 0; }

/* ---- Botón (forma base; variantes en components.css) -------------------- */
.elementor-button {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   ELEMENTOR FORMS
   ========================================================================== */
.elementor-field-group .elementor-field {
  font-size: var(--fs-body);
  padding: 13px 15px;
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1.5px solid var(--border-default);
  color: var(--text-primary);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.elementor-field-group .elementor-field:focus {
  border-color: var(--green-500);
  box-shadow: var(--shadow-focus);
  outline: none;
}
.elementor-field-group > label,
.elementor-field-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.elementor-field-type-submit .elementor-button {
  background: var(--green-500);
  color: #fff;
}
.elementor-field-type-submit .elementor-button:hover { background: var(--green-600); }

/* Mensajes del formulario */
.elementor-message {
  font-size: var(--fs-small);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.elementor-message.elementor-message-success { color: var(--green-700-solid); }
.elementor-message.elementor-message-danger,
.elementor-message.elementor-error { color: var(--red-600); }

/* ==========================================================================
   ELEMENTOR NAV MENU (si el header se hace con Elementor)
   ========================================================================== */
.elementor-nav-menu .elementor-item {
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  transition: color var(--t-fast);
}
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--green-600);
}

/* Menu cart toggle */
.elementor-menu-cart__toggle .elementor-button {
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-700);
}
.elementor-menu-cart__toggle .elementor-button:hover { color: var(--ink-900); }

/* ==========================================================================
   ELEMENTOR · WOOCOMMERCE PRODUCTS WIDGET
   --------------------------------------------------------------------------
   El widget "Products" de Elementor reutiliza el markup de WooCommerce
   (ul.products li.product), por lo que hereda los estilos de woocommerce.css.
   Aquí solo se asegura el gap del grid propio de Elementor.
   ========================================================================== */
.elementor-widget-woocommerce-products ul.products,
.elementor-products-grid ul.products {
  gap: var(--grid-gap);
}
.elementor-widget-woocommerce-products ul.products li.product,
.elementor-products-grid ul.products li.product {
  background: var(--bg-surface);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   Contenedor genérico: hereda tipografía body (seguro, sin forzar color)
   ========================================================================== */
.elementor-widget-container { font-family: var(--font-body); }