/**
 * T02 · T05 · Hero de páginas internas + tienda.
 * T03 · Icono de categoría.
 *
 * El background del hero lo inyecta JT_Hero::inject_hero_bg() cuando existe
 * el asset. Este archivo estiliza el layout y el fallback sin imagen.
 */

@layer components {

  /* Subheader base — sobreescribe la franja gris de BeTheme */
  #Subheader {
    padding: var(--jt-space-12) 0 !important;
    background: linear-gradient(120deg, var(--jt-color-bg-alt) 0%, var(--jt-cream) 100%);
    border-bottom: 1px solid var(--jt-color-border);
    position: relative;
  }

  #Subheader .title,
  #Subheader h1 {
    font-family: var(--jt-font-display);
    font-weight: var(--jt-fw-extrabold);
    font-size: var(--jt-fs-h1);
    color: var(--jt-color-text);
    margin: 0 0 var(--jt-space-2);
  }

  #Subheader .breadcrumbs {
    font-family: var(--jt-font-body);
    font-size: var(--jt-fs-caption);
    color: var(--jt-color-muted);
  }

  /* Fallback brand cuando no hay asset de hero */
  body:not(.jt-has-hero) #Subheader::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    background: linear-gradient(90deg, var(--jt-color-primary), var(--jt-color-accent));
  }

  /* Iconos de categoría (T03) */
  .jt-cat-icon {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--jt-space-3);
    object-fit: contain;
  }

  .woocommerce ul.products li.product-category .jt-cat-icon + .woocommerce-loop-category__title,
  .woocommerce ul.products li.product-category .jt-cat-icon + h2 {
    font-family: var(--jt-font-display);
    font-weight: var(--jt-fw-bold);
  }

  @media (max-width: 720px) {
    #Subheader { padding: var(--jt-space-8) 0 !important; }
    #Subheader .title { font-size: var(--jt-fs-h2); }
    .jt-cat-icon { width: 48px; height: 48px; }
  }
}

/* =====================================================================
   OUT-OF-LAYER · Breadcrumbs SIEMPRE verde brand en todas las páginas.
   BeTheme skin puede pintar el separador o el hover en rojo/otro accent
   según config; forzamos consistencia con el verde primary del brand.
   ===================================================================== */
html body #Subheader .breadcrumbs,
html body #Subheader .breadcrumbs *,
html body #Subheader .breadcrumbs a,
html body #Subheader .breadcrumbs li,
html body #Subheader .breadcrumbs li a,
html body #Subheader .breadcrumbs span,
html body #Subheader .breadcrumbs span a,
html body #Subheader ul.breadcrumbs li,
html body #Subheader ul.breadcrumbs li a,
html body #Subheader ul.breadcrumbs li span,
html body #Subheader ul.breadcrumbs li i,
html body #Subheader .breadcrumbs i,
html body .woocommerce-breadcrumb,
html body .woocommerce-breadcrumb a,
html body nav.woocommerce-breadcrumb,
html body nav.woocommerce-breadcrumb a {
  color: var(--jt-color-primary) !important;
}

/* Separadores (chevron, "/" o ">") también verde */
html body #Subheader .breadcrumbs .sep,
html body #Subheader .breadcrumbs .separator,
html body #Subheader .breadcrumbs [class*="icon-right"],
html body #Subheader .breadcrumbs [class*="chevron"],
html body .woocommerce-breadcrumb .separator {
  color: var(--jt-color-primary) !important;
}

/* Hover state — un tono ligeramente más oscuro del verde */
html body #Subheader .breadcrumbs a:hover,
html body .woocommerce-breadcrumb a:hover {
  color: var(--jt-color-primary-hover, var(--jt-color-primary)) !important;
  text-decoration: underline;
}

/* =====================================================================
   OUT-OF-LAYER · background-position: center 70% para TODOS los heroes.
   Antes solo se aplicaba en el CSS inyectado por JT_Hero::inject_hero_bg()
   → solo funcionaba en las páginas que teníamos en HERO_URLS
   (tienda, mi-cuenta, belleza, etc.). Páginas como nosotros, contacto,
   términos-y-condiciones, promociones (que muestran el #Subheader nativo
   de BeTheme con su imagen o gradiente) NO recibían el ajuste.

   Al ponerlo aquí como regla global out-of-layer, aplica al #Subheader
   en CUALQUIER página, tenga o no un hero custom nuestro.
   ===================================================================== */
html body #Subheader,
html body div#Subheader {
  background-position: center 70% !important;
}