/*
 * TinyMCE centra las imágenes mediante text-align en el bloque contenedor.
 * Tailwind Preflight convierte todas las imágenes en elementos block, por lo
 * que text-align deja de afectarlas. Esta regla conserva el centrado elegido
 * en el editor y mantiene las imágenes responsivas en el sitio público.
 */
.product-rich-text img {
    max-width: 100%;
    height: auto;
}

.product-rich-text [style*="text-align: center"] img,
.product-rich-text [style*="text-align:center"] img {
    display: inline-block !important;
}

.product-rich-text img.aligncenter,
.product-rich-text img[style*="margin-left: auto"][style*="margin-right: auto"],
.product-rich-text img[style*="margin-left:auto"][style*="margin-right:auto"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}