/**
 * Compatibilidad con BeTheme + WooCommerce nativos.
 *
 * Todo lo de acá viene del style.css pre-refactor. Se conservan solo las
 * reglas que siguen aplicando (BeTheme classes, WC variations layout,
 * FontAwesome menu icons, etc).
 *
 * NO agregar nuevas reglas acá — usar pages/ o components/ según corresponda.
 * Este archivo es solo para preservar customizaciones legacy que aún son
 * necesarias mientras BeTheme + productos variables sigan siendo la base.
 */

@layer overrides {

  /* =====================================================================
     Íconos FontAwesome en Mi Cuenta (Wishlists + Cupones)
     BeTheme WooCommerce menu no trae iconos para wishlists/coupons; los
     inyectamos con content unicode de Font Awesome 5.
     ===================================================================== */
  .woocommerce-MyAccount-navigation-link--account-wishlists a:before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900;
    content: "\f004";                                 /* heart */
  }

  .woocommerce-MyAccount-navigation-link--wc-smart-coupons a:before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900;
    content: "\f3ff";                                 /* ticket */
  }

  /* =====================================================================
     Sticky nav prev/next del producto (BeTheme)
     Centrar verticalmente los botones flotantes de navegación entre productos.
     ===================================================================== */
  .fixed-nav.fixed-nav-prev,
  .fixed-nav.fixed-nav-next {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
  }

  /* =====================================================================
     WC variations layout (aplica mientras haya productos variables)
     Cuando el producto no cae por el flujo de JT_Quotation, BeTheme
     renderiza su propio `.mfn-vr` y necesita estos ajustes.
     ===================================================================== */
  .woocommerce .product.style-default .entry-summary .cart.cart_group .add_to_cart_button_wrap,
  .woocommerce .product.style-default .entry-summary .cart.variations_form .woocommerce-variation-add-to-cart {
    flex-direction: column;
  }

  .woocommerce .product.style-default .entry-summary .mfn-variations-wrapper .mfn-vr {
    justify-content: start !important;
  }

  .mfn-vr > label {
    font-weight: bold !important;
  }

  .mfn-vr-select.attribute_cantidad {
    height: 37px;
  }

  .input-text.qty.text {
    height: 36px;
  }

  /* =====================================================================
     Botón "Añadir a la lista de deseos" (pill custom) en variations form
     Personalización visible que el cliente pidió: botón outline negro pill
     con label completo debajo del "Añadir al carrito".
     ===================================================================== */
  .woocommerce-variation-add-to-cart.variations_button .mfn-wish-button::before {
    content: "Añadir a la lista de deseos" !important;
    display: inline-block !important;
    margin-right: 5px !important;
    font-size: 14px !important;
    color: #000 !important;
  }

  .woocommerce-variation-add-to-cart.variations_button .mfn-wish-button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid #000 !important;
    margin-top: 10px !important;
    width: 100% !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
  }

  .woocommerce-variation-add-to-cart.variations_button {
    /* stretch en vez de flex-start → botones ocupan el 100% del ancho de la
       summary column y quedan centrados en su celda (add-to-cart + wishlist). */
    align-items: stretch !important;
    width: 100% !important;
  }

  .mfn-wish-button {
    margin: 0 !important;
  }

  /* =====================================================================
     Short description del producto en justify
     Decisión UX del cliente: descripciones legibles con márgenes parejos.
     ===================================================================== */
  .woocommerce-product-details__short-description {
    text-align: justify;
  }

  /* =====================================================================
     Layout del login form en /mi-cuenta/ (usuario NO logueado)
     Cuando no hay menú de MyAccount (el user no está logueado), centrar
     el form de login en 480px máximo.
     ===================================================================== */
  .woocommerce-account .the_content_wrapper:not(:has(.woocommerce-MyAccount-navigation)) {
    max-width: 480px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: var(--jt-space-8);
    padding-bottom: var(--jt-space-8);
    position: relative;
  }
}