/**
 * Fixes de layout globales:
 *   Fix 1 · Hero (#Subheader) tapado por header sticky → padding-top suficiente
 *   Fix 2 · Franja gris entre topbar y header → forzar background continuo blanco
 *   Fix 4 · Espacio en blanco después del footer → eliminar padding residual
 *
 * NO tocamos display/flex/position del header — solo backgrounds y paddings.
 */

@layer pages {

  /* =====================================================================
     Fix 2 · Franja gris entre topbar y header
     BeTheme aplica al #Top_bar:
       position: absolute; top: 61px; left: 0;
     Esos 61px son el espacio reservado para .mfn-topbar (barra verde),
     pero como #Top_bar es absolute, ese hueco muestra el background del
     body (gris de BeTheme). Solución: neutralizar el absolute y dejar que
     #Top_bar fluya naturalmente después de .mfn-topbar — sin gap posible.
     ===================================================================== */
  #Top_bar,
  #Header_wrapper #Top_bar {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    background-color: #ffffff !important;
    border-top: none !important;
    border-bottom: 1px solid var(--jt-color-border) !important;
  }

  /* Fondo blanco de refuerzo por si otro selector filtra */
  body,
  #Wrapper,
  #Header_wrapper {
    background-color: #ffffff !important;
  }

  /* La barra verde de "Síguenos en las redes!" mantiene su estilo brand */
  .mfn-topbar,
  #Header_wrapper .top-bar,
  #Header_wrapper > .top-bar {
    background-color: var(--jt-color-primary) !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 6px 20px !important;
    border-bottom: none !important;
    position: relative !important;
    top: auto !important;
  }

  .mfn-topbar a,
  #Header_wrapper .top-bar a { color: #ffffff !important; }

  /* Eliminar bordes/margins que puedan generar gap */
  #Header_wrapper { border: none !important; margin: 0 !important; padding: 0 !important; }

  /* =====================================================================
     Fix 1 · Hero (#Subheader)
     Padding uniforme + overflow visible para que el título nunca se corte.
     ===================================================================== */
  #Subheader {
    padding: var(--jt-space-12) 0 var(--jt-space-8) !important;  /* top 48px · bottom 32px */
    margin-top: 0 !important;
    min-height: auto !important;
  }

  #Subheader .title,
  #Subheader h1 {
    margin-top: 0 !important;
  }

  #Subheader,
  #Subheader .container {
    overflow: visible !important;
  }

  /* =====================================================================
     PDP · quitar el título del hero (solo dejar la migaja de pan)
     El usuario ya ve el título del producto en el content — no hace falta
     que se muestre grande en el #Subheader.
     ===================================================================== */
  .single-product #Subheader .title,
  .single-product #Subheader h1,
  .single-product #Subheader .subtitle {
    display: none !important;
  }

  .single-product #Subheader {
    padding: var(--jt-space-4) 0 !important;
    min-height: auto !important;
  }

  .single-product #Subheader .breadcrumbs,
  .single-product #Subheader .container {
    text-align: left;
  }

  /* =====================================================================
     Header · tipografía del menú de navegación
     BeTheme por default usa su propio font-family en #menu — forzamos
     la tipografía display del brand (Fredoka).
     ===================================================================== */
  #Top_bar #menu > ul > li > a,
  #Header #menu > ul > li > a,
  #Top_bar .menu > li > a,
  .mfn-menu-line-below a,
  nav#menu a {
    font-family: var(--jt-font-display) !important;
    font-weight: var(--jt-fw-semibold) !important;
    font-size: var(--jt-fs-body-sm) !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
  }

  /* Submenus de nav */
  #Top_bar #menu ul ul a,
  #Top_bar .menu ul ul a {
    font-family: var(--jt-font-body) !important;
    font-size: var(--jt-fs-caption) !important;
    font-weight: var(--jt-fw-regular) !important;
  }

  /* =====================================================================
     Shop · Sección del shortcode de categorías dentro del main
     Queda debajo del breadcrumb y encima del filtro/loop de productos.
     Respeta el sidebar-left de BeTheme para no romper el layout.
     ===================================================================== */
  .jt-shop-categories-section {
    padding: var(--jt-space-4) 0 !important;
    margin: 0 0 var(--jt-space-6) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--jt-color-border);
  }

  .jt-shop-categories-section .section_wrapper {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* El componente .jt-cats ajusta su propio spacing dentro del section */
  .jt-shop-categories-section .jt-cats {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  /* =====================================================================
     Fix 2 · header_placeholder gris
     BeTheme genera <div class="header_placeholder"> para reservar espacio
     cuando el header es sticky. A veces queda visible con background gris.
     Lo hacemos transparente para que no interfiera visualmente.
     ===================================================================== */
  .header_placeholder,
  #Header_wrapper .header_placeholder,
  #Wrapper > .header_placeholder {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
  }

  /* =====================================================================
     Fix 4 · Espacio en blanco después del footer + skip link visible
     BeTheme suele dejar padding-bottom en #Wrapper o margen tras #Footer.
     También ocultamos el skip-link "Ir al contenido" que a veces aparece
     al final del documento en vez de solo con focus.
     ===================================================================== */
  #Content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  #Wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  #Footer {
    margin-bottom: 0 !important;
  }

  /* La zona debajo del footer (copyright, credits) que BeTheme llama .footer_copy */
  #Footer + *,
  .footer_copy + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body,
  html {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* --------- Skip link "Ir al contenido" (a11y) ---------
     Debe estar oculto en pantalla y solo aparecer al recibir foco por
     teclado (Tab). BeTheme lo tiene fuera de posición o visible siempre.
  */
  .skip-link,
  a.skip-link,
  a.screen-reader-text,
  a[href="#Content"].skip-link,
  a[href="#content"].skip-link,
  a[href^="#"].screen-reader-text {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    white-space: nowrap !important;
  }

  /* Cuando recibe focus por teclado, se muestra en la esquina superior */
  .skip-link:focus,
  a.skip-link:focus,
  a.screen-reader-text:focus {
    position: fixed !important;
    left: var(--jt-space-4) !important;
    top: var(--jt-space-4) !important;
    width: auto !important;
    height: auto !important;
    padding: var(--jt-space-3) var(--jt-space-4) !important;
    background: var(--jt-color-primary) !important;
    color: #fff !important;
    z-index: 999999 !important;
    clip: auto !important;
    border-radius: var(--jt-radius-md) !important;
    text-decoration: none !important;
  }
}