/*
=========================================================================================
 * Estilos para la página de Tienda Principal (layout-shop.css)
=========================================================================================
*/

/*
 * SOLUCIÓN 1: Fondo gris SOLO para el área de contenido principal.
 * Aplicamos el fondo a #primary en lugar de a todo el body.
*/
/*.woocommerce-shop #primary {
    background-color: #f9f9f9;
}
*/
/*
 * Contenedor interno del grid de productos.
 * Esta regla ya no es necesaria si usas el ancho de contenedor de la página.
 * La he comentado por si la necesitas en el futuro, pero es seguro eliminarla.
.woocommerce-shop .container {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}
*/

/*
 * Rejilla de productos (Mobile-First)
*/
body.woocommerce-shop .products {
    /* SOLUCIÓN 2: Activa la rejilla para que los gaps funcionen. */
    display: grid;
    row-gap: 1.5rem; /* Aumentado para más espacio vertical */
    column-gap: 0.8rem;
}

/*
 * Estilo base de cada tarjeta de producto (Mobile-First)
*/
.woocommerce-shop .products li.product {
    background: #fff;
    border: 1px solid #eee;
    padding: 0.5rem 0.5rem 0 0.5rem;
    border-radius: 8px;
    text-align: center;
    transition: box-shadow 0.3s ease;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    min-height: 320px;
}

.woocommerce-shop .products li.product:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* Elementos internos de la tarjeta (Mobile-First) */
.woocommerce-shop .products li.product img {
    margin-top: 0.25rem;
    margin-bottom: 0.2rem;
}

.woocommerce-shop .products li.product h2.woocommerce-loop-product__title {
    min-height: 3.5em;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 0.6rem;
    padding: 0 0.25rem;
}

.woocommerce-shop .products li.product .price {
    font-size: 1rem !important;
    font-weight: 700;
    color: #000;
    margin-bottom: 1rem; /* Reducido para acercar el botón */
    display: block;
    text-align: center;
    white-space: nowrap;
}

.woocommerce-shop .products li.product .button {
    margin-top: auto; /* Empuja el botón hacia abajo */
    margin-bottom: 0.75rem;
}

/*
 * Media Queries para Escritorio / Tablet
*/
@media (min-width: 768px) {
    body.woocommerce-shop .products {
        row-gap: 1.5rem;
        column-gap: 1.5rem;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .woocommerce-shop .products li.product {
        min-height: 400px;
    }

    .woocommerce-shop .products li.product img {
        max-height: 240px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
        margin-bottom: 0.5rem;
    }

    .woocommerce-shop .products li.product h2.woocommerce-loop-product__title {
        font-size: 1rem;
        min-height: 3.5em; /* Ajustado para consistencia */
    }

    .woocommerce-shop .products li.product .price {
        font-size: 1.2rem !important;
    }

    .woocommerce-shop .products li.product .button {
        margin-bottom: 1rem;
    }
}

/* Estilos de paginación de WooCommerce */
.woocommerce-pagination {
    text-align: center;
    margin-top: 2rem;
    padding-bottom: 2rem;
}