/**
 * Header · brand overrides (conservador).
 *
 * REGLA CLAVE: NO tocamos display/flex/width de containers de BeTheme.
 * El layout Logo · Search · Iconos lo maneja BeTheme + Elementor.
 * Nosotros solo pintamos y sumamos labels.
 *
 * Historial de errores a evitar:
 *   1. `display: flex` + `flex: 1 1 340px` en .dgwt-wcas-search-wrapp
 *      rompía el search widget (lo escondía). NO hacer.
 *   2. `flex-direction: column` en <a> del carrito hacía que el precio
 *      se apilara sobre el label. NO hacer.
 */

@layer components {

  /* ================================================================
     BeTheme nativo search wrapper · OCULTAR SIEMPRE
     Usamos "AJAX Search for WooCommerce" (.dgwt-wcas-search-form).
     BeTheme además renderiza su propio .search_wrapper (form-searchform
     con placeholder "Enter your search") — duplicado, hay que matarlo.
     ================================================================ */
  #Top_bar .search_wrapper,
  #Header .search_wrapper,
  body .search_wrapper.search_wrapper {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ================================================================
     Sticky header (#Top_bar.is-sticky) · mantener estilos al scrollear
     BeTheme aplica .is-sticky al #Top_bar cuando hace scroll y reduce
     alturas/paddings. Aseguramos que search + iconos + labels se mantengan.
     ================================================================ */
  #Top_bar.is-sticky .dgwt-wcas-search-wrapp input.dgwt-wcas-search-input,
  #Top_bar.is-sticky input[type="search"] {
    height: 40px !important;
    padding: 0 var(--jt-space-4) !important;
    font-size: var(--jt-fs-body-sm) !important;
    border-radius: var(--jt-radius-pill) !important;
    background: var(--jt-color-bg-alt) !important;
    border: 1px solid var(--jt-color-border) !important;
    box-sizing: border-box !important;
  }

  #Top_bar.is-sticky .dgwt-wcas-search-wrapp,
  #Top_bar.is-sticky .jt-header-search {
    max-width: 460px !important;
    width: auto !important;
    margin: 0 var(--jt-space-4) !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* Iconos del header sticky: mantener alineación */
  #Top_bar.is-sticky .top_bar_right,
  #Top_bar.is-sticky .menuo-right {
    align-items: center !important;
  }

  /* Wishlist button en sticky */
  #Top_bar.is-sticky .mfn-wish-button,
  #Top_bar.is-sticky a.mfn-wish-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Labels del icono en sticky (Mi cuenta / Favoritos / Carrito) */
  #Top_bar.is-sticky a[href*="/mi-cuenta/"]::after,
  #Top_bar.is-sticky a[href*="/lista-de-deseos"]::after,
  #Top_bar.is-sticky a[href*="/carrito/"]::after {
    display: block !important;
    margin-top: 2px !important;
    font-size: 9px !important;
  }

  /* En mobile ocultar labels (icons only) */
  @media (max-width: 900px) {
    #Top_bar.is-sticky a[href*="/mi-cuenta/"]::after,
    #Top_bar.is-sticky a[href*="/lista-de-deseos"]::after,
    #Top_bar.is-sticky a[href*="/carrito/"]::after {
      display: none !important;
    }
  }

  /* ================================================================
     T11 · Wrapper del search inyectado en el header
     ================================================================ */

  /* Forzamos el contexto de posicionamiento en el header (fights BeTheme spec) */
  #Top_bar { position: relative !important; }
  #Header  { position: relative; }

  /* Search CENTRADO — top con valor fijo alineado al centro del logo.
     Ajustable si el header cambia de altura. */
  #Top_bar > .jt-header-search,
  #Header  > .jt-header-search {
    position: absolute;
    top: 25px;                          /* alineado con el centro del logo */
    left: 50%;
    transform: translateX(-50%);         /* solo eje horizontal */
    width: 520px;
    max-width: 45vw;
    z-index: 5;
    margin: 0;
    pointer-events: auto;
  }

  /* Ajustes por breakpoint según cómo BeTheme calcula el logo row */
  @media (max-width: 1200px) {
    #Top_bar > .jt-header-search,
    #Header  > .jt-header-search {
      top: 22px;
      width: 420px;
    }
  }

  @media (max-width: 900px) {
    #Top_bar > .jt-header-search,
    #Header  > .jt-header-search {
      /* En mobile queda debajo del header (fluye normal) */
      position: static;
      transform: none;
      width: 100%;
      max-width: 100%;
      margin: var(--jt-space-3) 0;
    }
  }

  /* El shortcode del plugin renderiza .dgwt-wcas-search-wrapp adentro:
     forzamos que ocupe todo el ancho del wrapper sin romper su layout */
  #Top_bar .jt-header-search .dgwt-wcas-search-wrapp {
    width: 100%;
    max-width: none !important;   /* el plugin trae max-width que limita */
  }

  #Top_bar .jt-header-search .dgwt-wcas-search-form {
    width: 100%;
    margin: 0;
  }

  /* Input más alto y con padding para ancho generoso */
  #Top_bar .jt-header-search input.dgwt-wcas-search-input {
    height: 46px !important;
    padding: 0 var(--jt-space-5) 0 var(--jt-space-8) !important;   /* espacio para el icono lupa */
    font-size: var(--jt-fs-body) !important;
    box-shadow: var(--jt-shadow-sm);
  }

  /* Fallback si el shortcode no está y renderiza el WP get_search_form() */
  #Top_bar .jt-header-search .searchform,
  #Top_bar .jt-header-search form {
    width: 100%;
    margin: 0;
  }

  /* ================================================================
     T11 · Estilo del INPUT (funciona tanto para el shortcode como
     para el widget de BeTheme si el cliente lo activa por su lado)
     ================================================================ */
  .dgwt-wcas-search-wrapp input.dgwt-wcas-search-input,
  #Top_bar .search_wrapper input[type="search"],
  #Top_bar .search_wrapper input[type="text"] {
    background: var(--jt-color-bg-alt);
    border: 1px solid var(--jt-color-border);
    border-radius: var(--jt-radius-pill);
    font-family: var(--jt-font-body);
    color: var(--jt-color-text);
    transition: border-color var(--jt-transition-fast),
                box-shadow var(--jt-transition-fast),
                background var(--jt-transition-fast);
  }

  .dgwt-wcas-search-wrapp input.dgwt-wcas-search-input:focus,
  #Top_bar .search_wrapper input:focus {
    outline: none;
    background: #fff;
    border-color: var(--jt-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jt-color-primary) 20%, transparent);
  }

  .dgwt-wcas-search-submit,
  .dgwt-wcas-search-icon {
    color: var(--jt-color-primary) !important;
    fill: var(--jt-color-primary) !important;
  }

  /* ================================================================
     T12 · Layout vertical del icono "Mi cuenta" (avatar top + label bottom)
     Se aplica cuando header-account.js marca el <a> con .jt-account.
     BeTheme trae reglas fuertes en #Top_bar a — usamos !important para
     ganar la cascada sin pelear specificity infinita.
     ================================================================ */
  #Top_bar a.jt-account,
  #Header  a.jt-account,
  a.jt-account {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-decoration: none !important;
    color: var(--jt-color-text) !important;
    position: relative !important;
    line-height: 1 !important;
    padding: 0 var(--jt-space-2) !important;
    font-size: 10px !important;   /* fuerza el tamaño heredable */
    font-family: var(--jt-font-display) !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    transition: color var(--jt-transition-fast);
    vertical-align: middle;
    height: auto !important;
  }

  #Top_bar a.jt-account:hover,
  #Header  a.jt-account:hover,
  a.jt-account:hover { color: var(--jt-color-primary) !important; }

  a.jt-account .jt-account__avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: var(--jt-color-bg-alt) !important;
    border: 1px solid var(--jt-color-border) !important;
    overflow: hidden !important;
    color: var(--jt-color-text) !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
  }

  a.jt-account .jt-account__avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    max-width: none !important;
  }

  a.jt-account .jt-account__avatar svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }

  a.jt-account .jt-account__label {
    display: inline-block !important;
    font-family: var(--jt-font-display) !important;
    font-size: 10px !important;
    font-weight: var(--jt-fw-semibold) !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Evitar duplicar el label: si el link ya es .jt-account, suprimir el ::after */
  #Top_bar a.jt-account::after,
  a.jt-account::after { content: none !important; }

  /* ================================================================
     T12 · Labels debajo de los iconos del header (fallback para favoritos/carrito)
     Se activa solo cuando el <a> contiene una <img> Y NO tiene ya texto
     (para no duplicar en los items del menú principal).
     ================================================================ */

  /* Solo tocamos hover/color, NO layout */
  #Top_bar a[href$="/mi-cuenta/"],
  #Top_bar a[href$="/mi-cuenta"],
  #Top_bar a[href*="/lista-de-deseos"],
  #Top_bar a[href*="/wishlist"],
  #Top_bar a[href$="/carrito/"],
  #Top_bar a[href$="/carrito"],
  #Top_bar a[href$="/cart/"] {
    text-decoration: none;
    transition: color var(--jt-transition-fast);
  }

  /* Contenedor de los 3 iconos: alinear TOP para que arranquen del mismo Y */
  #Top_bar .top_bar_right,
  #Top_bar .top_bar_right_wrapper,
  #Top_bar .menuo-right {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--jt-space-3) !important;
  }

  /* Cada link (Mi cuenta / Favoritos / Carrito): mismo layout vertical
     (icono arriba, label debajo) con MISMA altura total → alineación
     horizontal perfecta.
     Altura fija del icono (32px) para que los 3 empiecen y terminen igual. */
  #Top_bar a.top-bar-right-icon-user,
  #Top_bar a.jt-account,
  #Top_bar a.top-bar-right-icon-wishlist,
  #Top_bar a#wishlist_button,
  #Top_bar a.top-bar-right-icon-cart,
  #Top_bar a#header_cart {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: top !important;
    padding: 0 var(--jt-space-2) !important;
    height: auto !important;
    min-width: 64px !important;
    position: relative !important;
  }

  /* Slot fijo para el icono (32×32) — mismo alto para los 3 → labels
     terminan en la misma línea */
  #Top_bar a.top-bar-right-icon-user > svg,
  #Top_bar a.top-bar-right-icon-user > .jt-account__avatar,
  #Top_bar a.jt-account > .jt-account__avatar,
  #Top_bar a.top-bar-right-icon-wishlist > svg,
  #Top_bar a#wishlist_button > svg,
  #Top_bar a.top-bar-right-icon-cart > svg,
  #Top_bar a#header_cart > svg {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    width: 32px !important;
    flex: 0 0 32px !important;
  }

  /* Los SVG inline internos ocupan 26×26 dentro del slot de 32 */
  #Top_bar a.top-bar-right-icon-user > svg,
  #Top_bar a.top-bar-right-icon-wishlist > svg,
  #Top_bar a#wishlist_button > svg,
  #Top_bar a.top-bar-right-icon-cart > svg,
  #Top_bar a#header_cart > svg {
    overflow: visible;
  }

  /* Badge del contador (heart/cart) — posicionado en la esquina superior
     derecha del SVG (icon 32×32 centrado en link 64px min-width).
     Uso left: calc(50% + 8px) para caer justo sobre el borde derecho
     del icono independiente del ancho del link. */
  #Top_bar a#wishlist_button .header-wishlist-count,
  #Top_bar a#wishlist_button .count,
  #Top_bar a#wishlist_button .mfn-header-icon-0,
  #Top_bar a#header_cart .header-cart-count,
  #Top_bar a#header_cart .cart-count,
  #Top_bar a#header_cart .count,
  #Top_bar a#header_cart [class*="mfn-header-icon-"],
  #Top_bar a.top-bar-right-icon-wishlist .header-wishlist-count,
  #Top_bar a.top-bar-right-icon-wishlist .count,
  #Top_bar a.top-bar-right-icon-cart .header-cart-count,
  #Top_bar a.top-bar-right-icon-cart .count {
    position: absolute !important;
    top: -4px !important;
    left: calc(50% + 8px) !important;
    right: auto !important;
    bottom: auto !important;
    min-width: 16px !important;
    width: auto !important;                /* deja crecer con 3 dígitos (500) */
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
    transform: none !important;            /* evita transforms heredados que descoloquen */
    margin: 0 !important;
  }

  #Top_bar a[href$="/mi-cuenta/"]:hover,
  #Top_bar a[href*="/lista-de-deseos"]:hover,
  #Top_bar a[href*="/wishlist"]:hover,
  #Top_bar a[href$="/carrito/"]:hover {
    color: var(--jt-color-primary);
  }

  /* Label vía ::after — usa display: block para caer debajo del ícono.
     Aplica cuando el link es un icono puro (contiene <img> o <svg>) y
     NO tiene ya un texto propio (.label / .menu-title). Antes solo
     :has(img) — el corazón y el carrito de BeTheme usan <svg>, así que
     el label no aparecía. */
  #Top_bar a.top-bar-right-icon-user:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after,
  #Top_bar a[href$="/mi-cuenta/"]:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after,
  #Top_bar a.top-bar-right-icon-wishlist:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after,
  #Top_bar a[href*="/lista-de-deseos"]:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after,
  #Top_bar a#wishlist_button:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after,
  #Top_bar a.top-bar-right-icon-cart:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after,
  #Top_bar a[href$="/carrito/"]:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after,
  #Top_bar a#header_cart:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after {
    display: block;
    margin-top: 4px;
    font-family: var(--jt-font-display);
    font-size: 10px;
    font-weight: var(--jt-fw-semibold);
    letter-spacing: 0.02em;
    color: var(--jt-color-text);
    text-align: center;
    line-height: 1.2;
  }

  #Top_bar a.top-bar-right-icon-user:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after,
  #Top_bar a[href$="/mi-cuenta/"]:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after       { content: "Mi cuenta"; }

  #Top_bar a.top-bar-right-icon-wishlist:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after,
  #Top_bar a[href*="/lista-de-deseos"]:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after,
  #Top_bar a#wishlist_button:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after            { content: "Favoritos"; }

  #Top_bar a.top-bar-right-icon-cart:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after,
  #Top_bar a[href$="/carrito/"]:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after,
  #Top_bar a#header_cart:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after                { content: "Carrito"; }

  /* ================================================================
     GUEST (no logueado): ocultar Favoritos + Carrito (no aplican
     hasta que inicie sesión) y cambiar label "Mi cuenta" → "Iniciar
     sesión" para dejar clarísimo que NO ha ingresado.
     ADEMÁS ocultamos el menú principal (Inicio, Tienda, Promociones...)
     y el hamburger de mobile — todo el navigation solo tiene sentido
     una vez logueado (todas las rutas privadas redirigen a login igual).
     ================================================================ */
  body:not(.logged-in) #Top_bar a#wishlist_button,
  body:not(.logged-in) #Top_bar a.top-bar-right-icon-wishlist,
  body:not(.logged-in) #Top_bar a[href*="/lista-de-deseos"],
  body:not(.logged-in) #Top_bar a#header_cart,
  body:not(.logged-in) #Top_bar a.top-bar-right-icon-cart,
  body:not(.logged-in) #Top_bar a[href$="/carrito/"],
  /* Menú principal completo (desktop) */
  body:not(.logged-in) #Top_bar #menu,
  body:not(.logged-in) #Top_bar nav#menu,
  body:not(.logged-in) #Top_bar .menu_wrapper,
  body:not(.logged-in) #Top_bar .menu_wrapper #menu,
  body:not(.logged-in) #Header #menu,
  /* Hamburger del menú (mobile) */
  body:not(.logged-in) #Top_bar a.responsive-menu-toggle,
  body:not(.logged-in) #Top_bar .responsive-menu-toggle,
  body:not(.logged-in) #Header a.responsive-menu-toggle,
  /* Sticky bottom menu de BeTheme en mobile */
  body:not(.logged-in) .mfn-footer-stickymenu,
  body:not(.logged-in) #Footer + .mfn-footer-stickymenu,
  body:not(.logged-in) body > .mfn-footer-stickymenu {
    display: none !important;
  }

  /* Label del ícono de usuario cambia a "Iniciar sesión" para guest.
     Mayor especificidad que el default arriba para ganar la cascade. */
  body:not(.logged-in) #Top_bar a.top-bar-right-icon-user:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after,
  body:not(.logged-in) #Top_bar a[href$="/mi-cuenta/"]:not(:has(.label)):not(:has(.menu-title)):not(:has(.jt-account__label)):not([data-jt-account])::after {
    content: "Iniciar sesión" !important;
    color: var(--jt-color-primary) !important;
    font-weight: var(--jt-fw-bold) !important;
  }

  /* ================================================================
     Badges de contador (heart / cart)
     Solo pintamos colores — SIN reposicionar.
     ================================================================ */
  #Top_bar .count,
  #Top_bar .badge,
  #Top_bar .cart-count,
  #Top_bar .cart_item_count,
  #Top_bar .wishlist-count,
  #Top_bar .wishlist_products_counter_number {
    background-color: var(--jt-color-primary) !important;
    color: #fff !important;
    font-weight: var(--jt-fw-bold);
    font-family: var(--jt-font-display);
  }

  /* ================================================================
     Precio del carrito: OCULTAR en el header.
     Los totales de cotización pueden ser muy largos ($190.945.000)
     y desalinean los íconos. El user ya ve el total al abrir el
     mini-cart drawer o el /carrito/ — no hace falta duplicarlo acá.
     ================================================================ */
  #Top_bar .cart_total,
  #Top_bar .cart-total-amount,
  #Top_bar .cart_subtotal,
  #Top_bar .cart-price,
  #Top_bar a#header_cart .cart_total,
  #Top_bar a#header_cart .amount,
  #Top_bar a.top-bar-right-icon-cart .cart_total,
  #Top_bar a.top-bar-right-icon-cart .amount {
    display: none !important;
  }

  /* ================================================================
     Mobile: labels ocultos
     ================================================================ */
  @media (max-width: 900px) {
    #Top_bar a[href$="/mi-cuenta/"]:has(img)::after,
    #Top_bar a[href*="/lista-de-deseos"]:has(img)::after,
    #Top_bar a[href$="/carrito/"]:has(img)::after {
      display: none;
    }
  }

  /* ================================================================
     Mobile: ocultar íconos DUPLICADOS del header.
     BeTheme ya renderiza un sticky bottom menu en mobile (categorías,
     home, cart, favoritos) — mantener los mismos íconos arriba es
     redundante y desalinea el logo. Dejamos SOLO "Mi cuenta" y el
     hamburger; el resto vive abajo.
     ================================================================ */
  @media (max-width: 900px) {
    #Top_bar a#wishlist_button,
    #Top_bar a.top-bar-right-icon-wishlist,
    #Top_bar a[href*="/lista-de-deseos"],
    #Top_bar a#header_cart,
    #Top_bar a.top-bar-right-icon-cart,
    #Top_bar a[href$="/carrito/"] {
      display: none !important;
    }
  }
}

/* =====================================================================
   OUT-OF-LAYER · Nuclear kill del .search_wrapper nativo de BeTheme.
   Fuera de @layer para ganar la cascada contra be.css (que define
   `.mfn-searchbar-active .search_wrapper { display: block }` sin layer).

   Razones:
   - Usamos "AJAX Search for WooCommerce" (.dgwt-wcas-search-form) como
     buscador oficial. El .search_wrapper de BeTheme es un DUPLICADO
     que se filtra al scroll (sticky) porque algún JS toggle-a la
     clase .mfn-searchbar-active.
   - No lo usamos en ningún flujo, así que kill completo.
   ===================================================================== */
html body #Top_bar .search_wrapper,
html body #Header .search_wrapper,
html body .mfn-searchbar-active .search_wrapper,
html body #Top_bar.is-sticky .search_wrapper,
html body .search_wrapper.search_wrapper {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -99999px !important;
}

/* =====================================================================
   Guest en /mi-cuenta/ (no logueado): OCULTAR search completo.
   Razón UX: si el user no está logueado, todas las rutas privadas
   redirigen a /mi-cuenta/. No tiene sentido mostrarle un buscador
   de productos que no va a poder abrir sin login.
   ===================================================================== */
html body.woocommerce-account:not(.logged-in) .jt-header-search,
html body.woocommerce-account:not(.logged-in) .dgwt-wcas-search-wrapp,
html body.woocommerce-account:not(.logged-in) .dgwt-wcas-search-form {
  display: none !important;
  visibility: hidden !important;
}

/* =====================================================================
   OUT-OF-LAYER · Kill del precio del carrito en el header.
   BeTheme mete el total del cart al lado del ícono ($190.945.000)
   que rompe la alineación con Mi cuenta / Favoritos. Ocultamos.
   ===================================================================== */
html body #Top_bar .cart_total,
html body #Top_bar .cart-total-amount,
html body #Top_bar .cart_subtotal,
html body #Top_bar .cart-price,
html body #Top_bar .header-cart-total,
html body #Top_bar p.header-cart-total,
html body #Top_bar .mfn-cart-total,
html body #Top_bar .mfn-cart-count-value,
html body #Top_bar a#header_cart .cart_total,
html body #Top_bar a#header_cart .header-cart-total,
html body #Top_bar a#header_cart > .amount,
html body #Top_bar a#header_cart > span.amount,
html body #Top_bar a.top-bar-right-icon-cart .cart_total,
html body #Top_bar a.top-bar-right-icon-cart .header-cart-total,
html body #Top_bar a.top-bar-right-icon-cart > .amount,
html body #Top_bar a.top-bar-right-icon-cart > span.amount,
/* Elemento inyectado por AJAX fragments después de add-to-cart */
html body p.header-cart-total,
html body .header-cart-total {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* =====================================================================
   OUT-OF-LAYER · Ocultar el MODAL de login de BeTheme en TODAS las páginas.
   El modal (.mfn-header-login) muestra un formulario de login duplicado
   con:
     - Labels flotantes rotos (se superponen a los valores del input).
     - Bug de "primer clic no acciona" — el user tiene que darle 2 veces.
   Ocultamos el modal SIEMPRE. El ícono "Iniciar sesión" del header sigue
   navegando a /mi-cuenta/ donde el formulario nativo de WC funciona bien.
   ===================================================================== */
html body .mfn-header-login,
html body .mfn-header-login.is-side,
html body .mfn-header-login.mfn-header-modal-login,
html body .mfn-header-login.mfn-header-modal-nav,
html body div.mfn-header-login {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -99999px !important;
}

/* Overlay del modal (si BeTheme lo abre) también fuera */
html body.mfn-body-modal-open .mfn-overlay,
html body .mfn-modal-active-overlay,
html body.mfn-body-modal-open::before {
  display: none !important;
  pointer-events: none !important;
}
html body.mfn-body-modal-open {
  overflow: auto !important;   /* evita que el body quede locked por JS */
}

/* =====================================================================
   Mini-cart drawer (BeTheme .mfn-ch-product) · truncar el NOMBRE del
   producto a 2 líneas máximo con "..." al final.

   Problema previo: aplicabamos -webkit-line-clamp en el <p> padre pero
   el texto vive DENTRO del <a>. -webkit-line-clamp requiere que el
   elemento con display:-webkit-box contenga DIRECTAMENTE el texto,
   así que ahora lo aplicamos al <a> también. El <p> mantiene el clamp
   como red de seguridad para casos sin <a>.

   Estructura HTML real (BeTheme):
     .mfn-ch-product > .mfn-chp-col.mfn-chp-info > p.mfn-chp-name > a
   ===================================================================== */
html body .mfn-chp-name,
html body p.mfn-chp-name,
html body .mfn-ch-product .mfn-chp-name,
html body .mfn-ch-product p.mfn-chp-name {
  /* El <p> NO necesita clamp propio si el <a> lo hace — solo layout */
  margin: 0 !important;
  line-height: 1.3 !important;
  max-height: calc(1.3em * 2) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* El <a> es el que TIENE el texto — clamp real acá */
html body .mfn-chp-name a,
html body p.mfn-chp-name a,
html body .mfn-ch-product .mfn-chp-name a,
html body .mfn-ch-product p.mfn-chp-name a,
/* Mini-cart estándar de WC (fallback) */
html body .widget_shopping_cart_content .mini_cart_item > a,
html body .widget_shopping_cart_content .woocommerce-mini-cart__item a:not(.remove),
html body ul.woocommerce-mini-cart li.woocommerce-mini-cart-item > a:first-child,
html body ul.cart_list li a:first-child,
html body ul.product_list_widget li a:first-child {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
  max-height: calc(1.3em * 2) !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* Nota: -webkit-line-clamp inserta el "…" automáticamente cuando el
   texto no cabe en las 2 líneas configuradas. Antes fallaba porque
   estaba aplicado al <p> que no contenía texto directo — el texto vive
   en el <a>. Al mover el clamp al <a> (arriba), los puntos aparecen
   solos sin necesidad de fallback JS o ::after. */

/* La línea "Precio: $X" en el mini-cart — más compacta */
html body .mfn-ch-product .mfn-chp-info .price,
html body .mfn-chp-info p.price {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
}