/* Estilos generales para productos */
/* Intentar con diferentes selectores */
.woocommerce span.free-shipping,
.woocommerce .free-shipping,
.woocommerce .shipping-free,
.woocommerce .shipping-label-free,
.woocommerce .product .shipping,
.woocommerce .product .shipping-free {
    display: none !important;
}


.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas por defecto */
    gap: 20px; /* Agrega separación entre los productos */
}

.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center; /* Centramos los elementos dentro del producto */
    height: 100%;
    font-family: 'Roboto', sans-serif; /* Cambia la fuente a Roboto */
    font-size: 16px; /* Tamaño de fuente predeterminado */
    margin: 15px; /* Añade espacio alrededor de cada producto */
    text-align: center; /* Centrar el texto dentro de cada producto */
}

.woocommerce ul.products li.product img {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    min-height: 60px; /* Ajusta la altura mínima según tus necesidades */
    font-size: 16px; /* Tamaño de fuente específico para el título */
    text-align: center; /* Centra el título opcionalmente */
}

.woocommerce ul.products li.product .price {
    margin-top: auto;
    font-size: 16px; /* Ajusta el tamaño del texto del precio */
    font-weight: bold; /* Opcional: para resaltar el precio */
    color: #ff0000; /* Cambia el color del precio */
    text-align: center; /* Centra el precio */
    font-family: 'Roboto', sans-serif; /* Cambia la fuente del precio a Roboto */
}

.woocommerce ul.products li.product .button {
    margin-top: 15px;
    align-self: center;
    font-family: 'Roboto', sans-serif; /* Cambia la fuente del botón a Roboto */
    font-size: 12px; /* Tamaño de fuente del texto */
    padding: 15px 10px; /* Ajusta el padding para reducir la altura (arriba/abajo, izquierda/derecha) */
    line-height: 1.2; /* Ajusta la altura de línea si es necesario */
    height: auto; /* Asegúrate de que la altura del botón sea automática */
    min-height: 40px; /* Opcional: establece una altura mínima */
    border-radius: 5px; /* Opcional: ajusta las esquinas redondeadas */
    display: block; /* Asegúrate de que el botón sea un bloque */
    text-align: center; /* Centra el texto dentro del botón */
}




/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr); /* Cambia a 2 columnas para pantallas pequeñas */
        gap: 10px; /* Reducir la separación entre los productos para móviles */
        justify-content: center; /* Centramos los productos en la cuadrícula */
    }

    .woocommerce ul.products li.product {
        font-size: 14px; /* Reducir el tamaño de la fuente para móviles */
        margin: 10px; /* Reducir el margen alrededor de cada producto para móviles */
        text-align: center; /* Centramos el texto dentro de cada producto */
    }

    .woocommerce ul.products li.product img {
        width: 80%; /* Reducir el tamaño de las imágenes a 80% del contenedor */
        height: auto; /* Mantener la proporción de las imágenes */
        margin: 0 auto; /* Centrar las imágenes */
        display: block; /* Asegúrate de que las imágenes se comporten como elementos de bloque */
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 14px; /* Reducir el tamaño de la fuente del título para móviles */
    }

    .woocommerce ul.products li.product .price {
        font-size: 16px; /* Reducir el tamaño del texto del precio para móviles */
    }

    .woocommerce ul.products li.product .button {
        font-size: 10px; /* Reducir el tamaño de la fuente del botón para móviles */
        padding: 10px 5px; /* Ajustar el padding para móviles */
        min-height: 30px; /* Reducir la altura mínima del botón para móviles */
        display: block; /* Asegúrate de que el botón sea un bloque */
        text-align: center; /* Centra el texto dentro del botón */
    }
}