/* Estilos Móvil - BgfTech (max-width: 767px) */

/* Carrusel Horizontal Táctil */
.wc-block-product-template, 
.wc-block-grid__products,
.wp-block-woocommerce-product-collection ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 15px !important;
    padding: 10px !important;
    scrollbar-width: none !important; /* Ocultar barra */
}

/* Mostrar 2 productos (aprox) en pantalla */
.wc-block-product-template li,
.wc-block-grid__product,
.wp-block-woocommerce-product-collection li {
    flex: 0 0 calc(50% - 20px) !important;
    min-width: calc(50% - 20px) !important;
    scroll-snap-align: center !important;
}

/* Ocultar flechas en móvil */
.envo-storefront-carousel-arrows,
.wc-block-grid__product-image .next,
.wc-block-grid__product-image .prev {
    display: none !important;
}





/* * Estilos específicos para Móvil - BgfTech.shop
 * Configuración de carrusel táctil de 2 columnas sin flechas.
 */

/* Ocultar elementos innecesarios del tema padre en móvil */
.envo-storefront-carousel-arrows,
.wc-block-grid__products + .swiper-pagination {
    display: none !important;
}

/* Transformar bloques de colecciones en carrusel horizontal */
.wc-block-grid__products {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 0 15px 15px 15px;
}

/* Ajuste de 2 productos por vista centrados */
.wc-block-grid__product {
    flex: 0 0 calc(50% - 15px) !important;
    max-width: calc(50% - 15px) !important;
    scroll-snap-align: center;
    list-style: none;
    margin-bottom: 0 !important;
}

/* Mejorar la legibilidad de títulos en móviles para consistencia visual */
.wc-block-grid__product-title {
    font-size: 14px !important;
    min-height: 40px;
    line-height: 1.2;
}


/* Validación para BgfTech - Móvil */
/* body::before { */
    /* content: "MODO: MÓVIL ACTIVADO" !important; */
    /* position: fixed; */
    /* top: 10px; */
    /* left: 10px; */
    /* background: #ff4d4d !important; */
    /* color: white !important; */
    /* padding: 5px 10px; */
    /* font-size: 12px; */
    /* z-index: 999999; */
    /* border-radius: 4px; */
    /* font-family: sans-serif; */
/* } */

/**
 * BgfTech - Móvil Vertical
 * Muestra 2 productos + 15% del siguiente.
 */
.wc-block-product-template li,
.wc-block-grid__product {
    flex: 0 0 42% !important; /* Ajustado para que quepan 2 y asome el 3ro */
    min-width: 42% !important;
    scroll-snap-align: center !important; /* Centra el producto al soltar el dedo */
}

/**
 * BgfTech - Ajustes de Tarjeta en Móvil
 */

/* Reducir tamaño del título en móvil */
.wc-block-grid__product-title, 
.woocommerce-loop-product__title {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    min-height: 2.4em; /* Reserva espacio para 2 líneas máximo */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Alineación de componentes: Imagen, Título, Precio y Botón */
.wc-block-grid__product, 
.product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Empuja el botón al final */
    height: 100% !important;
    padding-bottom: 15px !important;
}

/* Alineación del precio */
.wc-block-grid__product-price, 
.price {
    margin-top: auto !important; /* Empuja el precio hacia arriba del botón */
    margin-bottom: 10px !important;
    font-weight: bold;
}

/**
 * BgfTech - Optimización Móvil (mobile.css)
 * Ajuste de títulos, alineación de elementos y corrección de botones.
 */

/* 1. Títulos: Reducción de fuente y control de altura */
.wc-block-grid__product-title, 
.woocommerce-loop-product__title {
    font-size: 14px !important; /* Tamaño legible pero compacto */
    line-height: 1.2 !important;
    margin: 10px 0 !important;
    font-weight: 500 !important;
    
    /* Forzar máximo 2 líneas y añadir puntos suspensivos si es más largo */
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px; /* Mantiene la altura aunque el título sea de una sola línea */
}

/* 2. Estructura de la Tarjeta: Alineación Perfecta */
.wc-block-grid__product, 
li.product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 100% !important;
    padding: 10px !important;
    background: #ffffff;
}

/* 3. Precios: Empuje hacia abajo */
.wc-block-grid__product-price, 
.price {
    margin-top: auto !important; /* Empuja el precio y el botón al fondo */
    margin-bottom: 8px !important;
    font-size: 15px !important;
}

/* 4. Botón "Añadir al Carrito": Corrección de Color y Posición */
html body .wc-block-grid__product-add-to-cart a,
html body .add_to_cart_button,
html body .wp-block-button__link {
    background-color: transparent !important;
    color: #181717 !important; /* Texto Negro */
    border: 1px solid #d9d9d9 !important;
    font-size: 12px !important;
    padding: 8px 5px !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

/**
 * BgfTech - Ajuste Estricto de Título en Móvil
 * Reduce fuente, elimina espaciado excesivo y corta a máximo 2 líneas.
 */

.wc-block-grid__product-title, 
.woocommerce-loop-product__title,
.wp-block-woocommerce-product-collection h2 {
    /* 1. Reducción de fuente y espaciado */
    font-size: 14px !important; 
    line-height: 1.1 !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    padding: 0 !important;
    font-weight: 500 !important;

    /* 2. Forzar el corte (Truncado) a 2 líneas */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* NO permite más de 2 líneas */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    
    /* 3. Altura fija para mantener simetría */
    height: 2.2em !important; /* Altura de exactamente 2 líneas */
    min-height: 2.2em !important;
}

/* Ajuste del contenedor para que no se estire */
.wc-block-grid__product, 
li.product {
    display: flex !important;
    flex-direction: column !important;
    max-height: 420px; /* Ajusta este valor según el alto total deseado */
    overflow: hidden !important;
}

/**
 * BgfTech - Alineación de Precios Dual vs Gratis
 * Reserva un espacio fijo para el precio para que el botón no salte.
 */

/* 1. Contenedor de Precio: Altura Fija */
/**
 * BgfTech - Ajuste de Contenedor de Precio
 * Reducimos el tamaño fijo al mínimo necesario para 2 líneas.
 */

.wc-block-grid__product-price, 
.price {
    /* Ajustamos de 2.8em a 2.2em para cerrar el espacio */
    min-height: 2.2em !important; 
    
    display: flex !important;
    flex-direction: column !important;
    
    /* Alinea el contenido (Gratis o Dual) al final del contenedor */
    /* Así el texto siempre estará cerca del botón */
    justify-content: flex-end !important; 
    
    /* Eliminamos márgenes que puedan estar sumando espacio extra */
    margin-bottom: 5px !important; 
    padding-bottom: 0 !important;
}

/* Forzamos que el precio dual no tenga márgenes internos que lo inflen */
.price span, .price ins, .price del {
    margin: 0 !important;
    line-height: 1.1 !important;
}
/* 2. Ajuste específico para el texto "Gratis" */
/* Asumiendo que tu gancho usa una clase o etiqueta estándar de WC */
.price .woocommerce-Price-amount,
.price ins,
.price del {
    display: block !important;
    line-height: 1.2 !important;
}

/* 3. El Botón: Anclaje final */
.wc-block-grid__product-add-to-cart,
.add_to_cart_button {
    align-self: flex-end !important;
    width: 100% !important;
}

/**
 * BgfTech - Compactación de Botón (mobile.css)
 * Elimina espacios muertos y reduce el área del botón.
 */

/* 1. Eliminar márgenes superiores del contenedor del botón */
.wc-block-grid__product-add-to-cart,
.add_to_cart_button {
    margin-top: 0 !important; 
    padding-top: 0 !important;
}

/* 2. Reducir el padding interno del botón para que sea más delgado */
html body .wc-block-grid__product-add-to-cart a,
html body .add_to_cart_button,
html body .wp-block-button__link {
    padding-top: 5px !important;    /* Espacio superior interno mínimo */
    padding-bottom: 5px !important; /* Espacio inferior interno mínimo */
    margin-bottom: 0 !important;    /* Elimina margen inferior */
    line-height: 1 !important;      /* Ajusta la altura de línea al texto */
}

/* 3. Ajuste de la tarjeta para cerrar la brecha final */
.wc-block-grid__product, 
li.product {
    padding-bottom: 5px !important; /* Reduce el espacio al borde de la tarjeta */
}



/**
 * BgfTech - Altura Estricta de Precio (mobile.css)
 * Forzamos que el contenedor de precio sea IDENTICO en todos los productos.
 */

/**
 * BgfTech - Centrado Absoluto de Precio (mobile.css)
 * Alineación perfecta para precios Dual y Gratis en contenedor de altura fija.
 */

.wc-block-grid__product-price, 
.price {
    /* 1. Mantenemos la altura fija que definimos */
    height: 50px !important; 
    
    /* 2. Activamos Flexbox para centrado */
    display: flex !important;
    flex-direction: column !important;
    
    /* Centrado Vertical */
    justify-content: center !important; 
    
    /* Centrado Horizontal */
    align-items: center !important; 
    text-align: center !important;
    
    /* 3. Limpieza de espacios externos */
    margin-bottom: 10px !important;
    padding: 0 !important;
    width: 100% !important; /* Asegura que ocupe todo el ancho para centrar bien */
}

/* 4. Aseguramos que los elementos internos (span, ins, del) no tengan márgenes */
.price span, .price ins, .price del {
    display: block !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}


/**
 * BGF INVERSIONES C.A. - PRODUCT DETAIL (MOBILE & GLOBAL)
 * Estilos base y visualización en una sola columna.
 */

/* 1. Título y Cabecera */
.single-product .bgf-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin-bottom: 10px !important;
    color: #333;
    text-align: left;
}

/* 2. Tarjeta de Precios Duales */
.single-product .bgf-price-card-minimal {
    border: 1px solid rgba(0, 68, 129, 0.15);
    background: #ffffff;
    padding: 12px 15px !important;
    border-radius: 10px;
    margin: 5px 0 15px 0 !important;
}

.single-product .bgf-main-price-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
}

.single-product .bgf-usd-value {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #000;
}

.single-product .bgf-ves-value {
    font-size: 16px !important;
    color: #444 !important;
    font-weight: 500;
}

.single-product .bgf-rate-tag {
    font-size: 11px !important;
    color: #777;
    background: #f0f4f8;
    padding: 2px 6px;
    border-radius: 4px;
}

/* 3. Botones de Acción Estilo Payhip */
.single-product .payhip-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.single-product .bgf-btn-buy-now {
    background: #004481 !important;
    color: #fff !important;
    padding: 16px !important;
    text-align: center;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
    transition: background 0.3s ease;
}

.single-product .single_add_to_cart_button {
    background-color: rgba(0, 68, 129, 0.05) !important;
    color: #004481 !important;
    border: 1px solid #004481 !important;
    border-radius: 6px !important;
    padding: 14px !important;
    font-weight: 600 !important;
    width: 100% !important;
}

/* 4. Limpieza de PayPal (Global) */
.single-product .ppc-button-wrapper, 
.single-product #ppc-button-ppcp-gateway,
.single-product .wc-ppcp-product-payment-container,
.single-product [id^="zoid-paypal-buttons"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}