/* ==========================================================================
   1. CATÁLOGO GENERAL (Grilla de Tienda)
   ========================================================================== */

/* Redondeo de 40px para fotos de catálogo */
.woocommerce ul.products li.product a img,
.woocommerce-loop-product__link img,
.ct-media-container,
.ct-media-container img,
[data-products] figure,
[data-products] .ct-media-container,
.wc-block-grid__product-image img,
.wc-block-grid__product-image,
.wc-block-layout__product-image img,
.woocommerce-loop-product__thumbnail,
.woocommerce-loop-product__thumbnail img {
    border-radius: 40px !important;
    overflow: hidden !important;
}

/* Sombra sutil en el catálogo */
[data-products] figure,
.wc-block-grid__product-image,
.woocommerce-loop-product__thumbnail {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Hover en catálogo */
.woocommerce ul.products li.product:hover figure,
.wc-block-grid__product:hover .wc-block-grid__product-image,
.woocommerce-loop-product__thumbnail:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

/* ==========================================================================
   2. DETALLE DE PRODUCTO INDIVIDUAL (Galería grande)
   ========================================================================== */

/* Fondos limpios para evitar picos en las esquinas */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image,
.flexy,
.flex-viewport,
.flex-active-slide {
    background: transparent !important;
}

/* Redondeo más marcado de 32px en la foto grande individual */
.woocommerce-product-gallery .ct-media-container,
.woocommerce-product-gallery .ct-media-container img {
    border-radius: 32px !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* Sombra corta y difuminada sutilmente (evita recortes y despegado limpio) */
.woocommerce-product-gallery .ct-media-container {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07),
        0 1px 3px rgba(0, 0, 0, 0.03) !important;
    transition: box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Hover: sombra un poco más profunda pero muy contenida */
.woocommerce-product-gallery:hover .ct-media-container {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.04) !important;
}