/* Estilos Tablet - BgfTech (768px a 1024px) */

ul.products li.product, 
.wc-block-grid__product {
    max-width: calc(33.33% - 20px) !important;
    flex: 0 0 calc(33.33% - 20px) !important;
}


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

/**
 * 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;
}

/**
 * BgfTech - Tablet y Móvil Horizontal
 */
.wc-block-product-template, 
.wc-block-grid__products,
.wp-block-woocommerce-product-collection ul {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important;  /* IE/Edge */
}

.wc-block-product-template::-webkit-scrollbar,
.wp-block-woocommerce-product-collection ul::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
}

.wc-block-product-template li,
.wc-block-grid__product {
    flex: 0 0 calc(25% - 15px) !important; 
    min-width: calc(25% - 15px) !important;
    scroll-snap-align: start !important;
}

/**
 * BgfTech - Alineación Profesional en Pantallas Grandes
 */
.wc-block-grid__product, 
.product {
    display: flex !important;
    flex-direction: column !important;
}

/* El botón siempre al final */
.wc-block-grid__product-add-to-cart, 
.add_to_cart_button {
    margin-top: auto !important; 
    width: 100% !important;
    text-align: center;
}

/* Títulos consistentes */
.wc-block-grid__product-title {
    min-height: 3em; /* Espacio uniforme para títulos en Desktop */
}