/* =========================================================
   ARCHIVE GRID — uniformar imagen de producto en el catalogo
   ---------------------------------------------------------
   Las imagenes GBP tienen proporciones muy dispares (botellas
   verticales, bidones casi cuadrados, sachets) y ~56% del catalogo
   no tiene foto real -> cae en el placeholder cuadrado de WooCommerce.
   Con height:auto cada card quedaba con un alto de imagen distinto y
   dentro de una misma fila del grid los titulos/precios/badges quedaban
   desalineados.

   Fijamos un BOX CUADRADO (aspect-ratio 1/1) que escala con el ancho de
   la columna (responsivo, sin media queries de alto) y encajamos la
   imagen con object-fit:contain (decision del cliente 2026-06-17: mostrar
   el producto COMPLETO, sin recorte, centrado sobre fondo blanco con algo
   de aire). Las fotos del catalogo son mayormente verticales (botellas,
   paquetes); con cover se cortaban tapas/etiquetas y se veian "rotas".
   El placeholder, al ser cuadrado, llena el box sin franjas.

   ALCANCE: shop, archives de categoria, resultados de busqueda y los
   grids related/upsell/cross-sell de la ficha (todos usan
   .wd-products .product-grid-item). Se EXCLUYE el mega-menu, que tiene
   su propia regla de alto fijo (.naccato-mm-featured-products ...).
   ========================================================= */

/* El <a> que envuelve la imagen es el box cuadrado uniforme.
   overflow:hidden SOLO aca (no en .wd-product-thumb) para recortar el
   excedente de la imagen sin tapar los overlays/quick-shop que WoodMart
   desliza por fuera del area de imagen. */
.wd-products:not(.naccato-mm-featured-products .wd-products)
    .product-grid-item .wd-product-thumb .product-image-link {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* Fondo del box de imagen: BLANCO fijo. Antes apuntaba a --color-bg-body,
       pero con el skin Vegetables ese token es crema (#FAF8F5); las fotos de
       producto necesitan fondo blanco para contraste. */
    background-color: #ffffff;
}

/* Imagen principal + hover-swap: se muestran ENTERAS dentro del box (sin
   recorte), centradas, con un padding de aire sobre el fondo blanco.
   box-sizing:border-box para que el padding no agrande el box cuadrado.
   position:absolute de la hover-img la provee WoodMart; no la reseteamos. */
.wd-products:not(.naccato-mm-featured-products .wd-products)
    .product-grid-item .wd-product-thumb .product-image-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: var(--space-sm, 0.5rem);
    box-sizing: border-box;
    display: block;
}

/* Salvaguarda: si la hover-img se renderiza como hermana del <a> (fuera
   de .product-image-link), tambien la encajamos. No fija aspect-ratio en
   el thumb (eso rompe el anclaje de overlays); solo normaliza object-fit. */
.wd-products:not(.naccato-mm-featured-products .wd-products)
    .product-grid-item .wd-product-thumb > img,
.wd-products:not(.naccato-mm-featured-products .wd-products)
    .product-grid-item .wd-product-thumb .hover-img,
.wd-products:not(.naccato-mm-featured-products .wd-products)
    .product-grid-item .wd-product-thumb .product-image-hover {
    object-fit: contain;
    object-position: center;
}

/* =========================================================
   CAM-003 — EL ADD-TO-CART NO TAPA LA IMAGEN (hover buttons-on-hover)
   ---------------------------------------------------------
   Diseno de loop activo: products_hover = "buttons-on-hover"
   (.wd-hover-buttons-on-hover). En desktop (>=1025px) WoodMart deja el
   .wd-product-footer (boton "Agregar al carrito") OCULTO con un margin
   negativo en .product-element-bottom; al hacer hover, sube el bloque y
   RECORTA el borde inferior de la imagen (clip-path) para meter el boton
   sobre el thumb -> "el boton tapa la imagen".

   Lo neutralizamos: el footer queda SIEMPRE visible, en flujo normal,
   DEBAJO del precio (es decir, bajo la imagen) y sin recortar el thumb.
   En mobile (<1025px) WoodMart ya lo muestra en flujo, no hace falta tocar.

   Se EXCLUYE el mega-menu (.naccato-mm-featured-products), igual que el
   resto del archivo.
   ========================================================= */

/* Footer (boton de compra) siempre visible y en flujo. */
.wd-products:not(.naccato-mm-featured-products .wd-products)
    .product-grid-item.wd-hover-buttons-on-hover .wd-product-footer {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 1025px) {
    /* Sin margen negativo: el footer ocupa su lugar bajo el precio. */
    .wd-products:not(.naccato-mm-featured-products .wd-products)
        .product-grid-item.wd-hover-buttons-on-hover .product-element-bottom {
        margin-bottom: 0;
    }
    /* En hover NO desplazar el bloque inferior ni recortar la imagen. */
    .wd-products:not(.naccato-mm-featured-products .wd-products)
        .product-grid-item.wd-hover-buttons-on-hover:hover .product-element-bottom,
    .wd-products:not(.naccato-mm-featured-products .wd-products)
        .product-grid-item.wd-hover-buttons-on-hover.wd-variation-active .product-element-bottom {
        transform: none;
    }
    .wd-products:not(.naccato-mm-featured-products .wd-products)
        .product-grid-item.wd-hover-buttons-on-hover:hover .wd-product-thumb,
    .wd-products:not(.naccato-mm-featured-products .wd-products)
        .product-grid-item.wd-hover-buttons-on-hover.wd-variation-active .wd-product-thumb {
        clip-path: none;
    }
}