/**
 * Base — reset y aplicación de la escala tipográfica del brand.
 *
 * Reduce todos los tamaños del sitio SIN pelear specificity infinita:
 *   - tokens.css ya bajó la escala global.
 *   - Acá aplicamos los tokens a los selectores más comunes de
 *     BeTheme + Elementor + WooCommerce con especificidad justa.
 */

@layer base {

  html { font-size: 100%; }

  body {
    font-family: var(--jt-font-body);
    font-size: var(--jt-fs-body);
    font-weight: var(--jt-fw-regular);
    line-height: var(--jt-lh-body);
    color: var(--jt-color-text);
  }

  /* Headings globales */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--jt-font-display);
    line-height: var(--jt-lh-tight);
    color: var(--jt-color-text);
  }

  h1 { font-size: var(--jt-fs-h1); font-weight: var(--jt-fw-extrabold); }
  h2 { font-size: var(--jt-fs-h2); font-weight: var(--jt-fw-bold); }
  h3 { font-size: var(--jt-fs-h3); font-weight: var(--jt-fw-bold); }
  h4 { font-size: var(--jt-fs-body); font-weight: var(--jt-fw-bold); }
  h5 { font-size: var(--jt-fs-body-sm); font-weight: var(--jt-fw-bold); }
  h6 { font-size: var(--jt-fs-caption); font-weight: var(--jt-fw-bold); }

  p {
    font-size: var(--jt-fs-body);
    line-height: var(--jt-lh-body);
  }

  small { font-size: var(--jt-fs-caption); }

  a {
    color: var(--jt-color-primary);
    transition: color var(--jt-transition-fast);
  }
  a:hover { color: var(--jt-color-primary-hover); }

  *:focus-visible {
    outline: 2px solid var(--jt-color-primary);
    outline-offset: 2px;
    border-radius: var(--jt-radius-sm);
  }
}

/* ============================================================
   Overrides para BeTheme + Elementor + WooCommerce
   Especificidad alta con !important solo donde compite el parent theme.
   Cambiar tokens.css cascadea acá también.
   ============================================================ */
@layer overrides {

  /* --- BeTheme headings globales --- */
  .mfn-title,
  .mfn-subtitle,
  #Subheader h1,
  #Subheader .title,
  #Subheader .subtitle,
  .page-title,
  .entry-title {
    font-family: var(--jt-font-display) !important;
    font-size: var(--jt-fs-h1) !important;
    font-weight: var(--jt-fw-extrabold) !important;
    line-height: var(--jt-lh-tight) !important;
  }

  #Subheader .subtitle,
  .subtitle {
    font-size: var(--jt-fs-body) !important;
    font-weight: var(--jt-fw-regular) !important;
    color: var(--jt-color-muted) !important;
  }

  /* --- WooCommerce títulos y precios --- */
  .woocommerce div.product .product_title,
  .woocommerce h1.product_title {
    font-size: var(--jt-fs-h1) !important;
    line-height: var(--jt-lh-tight) !important;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h2,
  .woocommerce ul.products li.product h3 {
    font-size: var(--jt-fs-body) !important;
    font-weight: var(--jt-fw-semibold) !important;
    line-height: var(--jt-lh-tight) !important;
  }

  .woocommerce ul.products li.product .price,
  .woocommerce div.product p.price,
  .woocommerce div.product span.price {
    font-size: var(--jt-fs-body) !important;
    font-weight: var(--jt-fw-bold) !important;
  }

  /* --- Menús de navegación (BeTheme) --- */
  #Top_bar #menu > ul > li > a,
  .menu > li > a {
    font-size: var(--jt-fs-body-sm) !important;
    font-weight: var(--jt-fw-semibold) !important;
  }

  #Top_bar .menu > li ul li a,
  .sub-menu li a {
    font-size: var(--jt-fs-caption) !important;
  }

  /* --- Elementor headings (widgets) --- */
  .elementor-widget-heading .elementor-heading-title {
    line-height: var(--jt-lh-tight) !important;
  }
  .elementor-widget-heading .elementor-heading-title.elementor-size-xxl { font-size: var(--jt-fs-display) !important; }
  .elementor-widget-heading .elementor-heading-title.elementor-size-xl  { font-size: var(--jt-fs-h1) !important; }
  .elementor-widget-heading .elementor-heading-title.elementor-size-large { font-size: var(--jt-fs-h2) !important; }
  .elementor-widget-heading .elementor-heading-title.elementor-size-medium { font-size: var(--jt-fs-h3) !important; }
  .elementor-widget-heading .elementor-heading-title.elementor-size-small { font-size: var(--jt-fs-body) !important; }

  .elementor-widget-text-editor,
  .elementor-widget-text-editor p {
    font-size: var(--jt-fs-body) !important;
    line-height: var(--jt-lh-body) !important;
  }

  .elementor-button {
    font-size: var(--jt-fs-button) !important;
  }

  /* --- Breadcrumbs / metadatos --- */
  .breadcrumbs,
  .breadcrumbs a,
  .breadcrumbs li,
  .woocommerce .woocommerce-breadcrumb {
    font-size: var(--jt-fs-caption) !important;
    letter-spacing: 0.02em;
  }

  /* --- Buttons WooCommerce genéricos --- */
  .woocommerce .button,
  .woocommerce button.button {
    font-size: var(--jt-fs-button) !important;
    font-weight: var(--jt-fw-semibold) !important;
  }

  /* --- Forms globales --- */
  input, select, textarea {
    font-size: var(--jt-fs-body-sm) !important;
    font-family: var(--jt-font-body) !important;
  }

  label {
    font-size: var(--jt-fs-body-sm) !important;
  }

  /* --- Footer widgets --- */
  #Footer .widget,
  #Footer .widget p,
  #Footer .widget a,
  #Footer .widget li {
    font-size: var(--jt-fs-body-sm) !important;
  }
}

/* =====================================================================
   OUT-OF-LAYER · Forzar Poppins en TODO el sitio.
   BeTheme y Elementor inyectan sus propios font-family con !important en
   CSS unlayered (que le gana a cualquier @layer). Sin este bloque, headings,
   menu, botones y widgets Elementor mantienen las fonts default del theme
   parent (Mont/Montserrat). Este selector universal cubre todo.
   ===================================================================== */
html body,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body p, html body a, html body span, html body div, html body li, html body td,
html body button, html body input, html body select, html body textarea, html body label,
html body .elementor, html body .elementor *,
html body #Header, html body #Header *,
html body #Top_bar, html body #Top_bar *,
html body #Footer, html body #Footer *,
html body #Subheader, html body #Subheader *,
html body .mfn-title, html body .mfn-subtitle,
html body .elementor-widget-heading .elementor-heading-title,
html body .elementor-widget-text-editor,
html body .woocommerce, html body .woocommerce * {
  font-family: "Poppins", "Aptos", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Excepciones: iconos (dashicons, font-awesome, etc.) mantienen su font */
html body [class*="dashicons"],
html body [class*="fa-"],
html body .fa, html body .fas, html body .far, html body .fab, html body .fal,
html body .material-icons,
html body .mfn-icon,
html body i.icon {
  font-family: inherit !important;   /* que la icon-font original prevalezca */
}
html body i.dashicons { font-family: dashicons !important; }
html body i.fa, html body i.fas { font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important; }
html body i.fab { font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands", FontAwesome !important; }