.cwi-external-gallery {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 500px !important;
}

.cwi-external-main {
	width: 100% !important;
	max-width: 500px !important;
}

.cwi-external-main-img {
	display: block !important;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 500px !important;
	object-fit: contain !important;
	border-radius: 4px;
	background: #f8f8f8;
}

.cwi-external-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cwi-external-thumb {
	width: 70px !important;
	height: 70px !important;
	max-width: 70px !important;
	object-fit: contain !important;
	background: #f8f8f8;
	border: 2px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.cwi-external-thumb:hover {
	border-color: #ccc;
}

.cwi-external-thumb.is-active {
	border-color: #333;
}

img.cwi-external-image {
	max-width: 300px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
}

/* Algunas fotos de producto son muy verticales (mucho más altas que
   anchas). Si el tema estira la imagen a lo ancho de toda la columna
   (comportamiento habitual en muchos temas), la altura se dispara de
   forma desproporcionada y la imagen "se sale" de la pantalla. Esta
   regla limita la altura máxima visible en la galería del producto,
   dejando que la anchura se ajuste sola para mantener la proporción. */
.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery img {
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 600px !important;
	margin: 0 auto !important;
	display: block !important;
}