/* Identidad Visual BgfTech - Estilos Globales */

/* Tipografía y Colores Base */
ul.products li.product .woocommerce-loop-product__title,
.wc-block-product h2.wp-block-post-title a,
.wc-block-grid__product-price,
ul.products li.product .price,
.wc-block-components-product-button__button,
.wc-block-product .wp-block-button__link {
    font-family: 'Open Sans Condensed', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 200;
    color: #333;
}

/* Tarjetas de Producto - Estructura Base */
ul.products li.product,
.wc-block-product,
.related.products li.product {
    text-align: center;
    border: 1px solid #d9d9d9;
    padding: 8px;
    border-radius: 5px;
    background: #fff;
    transition: all 0.3s ease;
}

/* Imágenes de Producto */
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
    border-radius: 5px;
    object-fit: contain;
}

/* Botones BgfTech */
ul.products li.product a.button,
.wc-block-components-product-button__button,
.wc-block-product .wp-block-button__link {
    border: 1px solid #d9d9d9 !important;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

ul.products li.product a.button:hover,
.wc-block-product .wp-block-button__link:hover {
    background-color: #5a0bbd;
    border-color: #5a0bbd;
    color: #fff;
    transform: scale(1.05);
}

/* Ocultar elementos de PayPal/Separadores */
.paypal-buttons-separator, .wc-block-components-separator,
.wc-block-components-express-payment-continue-rule {
    display: none !important;
}

/**
 * Estilos Móvil/Tablet - BgfTech
 * Prioriza el desplazamiento táctil sobre las flechas.
 */
.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;
}

/* En estos dispositivos las flechas no existen en el DOM por el JS, 
   pero forzamos que si algo llegara a aparecer, no se vea */
.bgf-nav-btn {
    display: none !important;
}

.wc-block-product-template, 
.wc-block-grid__products,
.wp-block-woocommerce-product-collection ul {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important; /* Obliga a encajar en un producto */
    scroll-behavior: smooth;
    gap: 20px !important; /* Mantén este gap consistente en todos los archivos */
}

/* Forzar visibilidad del botón sobre estilos de WP */
html body .wp-block-button__link, 
html body .wp-element-button, 
html body .add_to_cart_button {
    background-color: transparent !important;
    color: #181717 !important; /* Texto negro */
    border: 1px solid #d9d9d9 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .wp-block-button__link:hover, 
html body .wp-element-button:hover, 
html body .add_to_cart_button:hover {
    background-color: #5a0bbd !important;
    color: #ffffff !important;
}