/*
 * MARFIUS Productos Visual v1.0.0
 * Uniformidad para imágenes y tarjetas de producto WooCommerce.
 */

:root {
    --marfius-product-image-ratio: 1 / 1;
    --marfius-product-image-padding: 18px;
    --marfius-product-card-radius: 10px;
    --marfius-product-card-gap: 14px;
}

/* Tarjetas clásicas de WooCommerce y Astra */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.wc-block-grid__product,
.wc-block-product,
.wp-block-woocommerce-product-template > li {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Enlaces principales: permiten alinear títulos, precios y botones */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product > a.woocommerce-LoopProduct-link,
.wc-block-grid__product-link,
.wc-block-components-product-image > a {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Marco uniforme para todas las imágenes de productos en listados */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
.ast-woocommerce-container ul.products li.product img,
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-template .wc-block-components-product-image img,
.wc-block-product .wc-block-components-product-image img,
.woocommerce .products .product .astra-shop-thumbnail-wrap img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--marfius-product-image-ratio) !important;
    object-fit: contain !important;
    object-position: center !important;
    box-sizing: border-box !important;
    padding: var(--marfius-product-image-padding) !important;
    margin: 0 0 var(--marfius-product-card-gap) !important;
    background: #ffffff !important;
    border-radius: var(--marfius-product-card-radius) !important;
}

/* Evita que contenedores del tema recorten tapas, bolsas o botellas */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap,
.wc-block-grid__product-image,
.wp-block-woocommerce-product-template .wc-block-components-product-image,
.wc-block-product .wc-block-components-product-image {
    width: 100% !important;
    aspect-ratio: var(--marfius-product-image-ratio) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border-radius: var(--marfius-product-card-radius) !important;
}

/* Cuando la imagen está dentro de un contenedor cuadrado, ocupa todo el marco */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap img,
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-template .wc-block-components-product-image img,
.wc-block-product .wc-block-components-product-image img {
    height: 100% !important;
    margin-bottom: 0 !important;
}

/* Alineación de información inferior */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
.wp-block-woocommerce-product-template .wc-block-components-product-name {
    min-height: 2.8em;
    line-height: 1.4;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.wc-block-grid__product-price,
.wp-block-woocommerce-product-template .wc-block-components-product-price {
    min-height: 1.8em;
}

.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button,
.wc-block-grid__product-add-to-cart,
.wp-block-woocommerce-product-template .wp-block-button {
    margin-top: auto !important;
}

/* Efecto discreto, sin alterar el diseño existente */
@media (hover: hover) {
    .woocommerce ul.products li.product a img,
    .woocommerce-page ul.products li.product a img,
    .wc-block-grid__product-image img,
    .wp-block-woocommerce-product-template .wc-block-components-product-image img {
        transition: transform .22s ease, box-shadow .22s ease;
    }

    .woocommerce ul.products li.product:hover a img,
    .woocommerce-page ul.products li.product:hover a img,
    .wc-block-grid__product:hover .wc-block-grid__product-image img,
    .wp-block-woocommerce-product-template > li:hover .wc-block-components-product-image img {
        transform: scale(1.015);
        box-shadow: 0 8px 24px rgba(17, 24, 39, .08);
    }
}

/* En móvil se aprovecha un poco más el espacio sin perder uniformidad */
@media (max-width: 767px) {
    :root {
        --marfius-product-image-padding: 10px;
        --marfius-product-card-gap: 10px;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce-page ul.products li.product .woocommerce-loop-product__title,
    .wc-block-grid__product-title,
    .wp-block-woocommerce-product-template .wc-block-components-product-name {
        min-height: 2.6em;
    }
}

/* No altera la galería de la ficha individual del producto */
.single-product .woocommerce-product-gallery img {
    aspect-ratio: auto !important;
    object-fit: initial !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}