/* The free-value voucher reuses the current site logo. Keep its transparent
 * artwork inside the same media stage as every other product, never over the
 * category kicker, title or action controls. */
.thps-voucher-card {
	min-width: 0 !important;
	overflow: hidden !important;
}

.thps-voucher-card :where(
	.jet-woo-products__inner-box,
	.jet-woo-products__thumb-wrap,
	.jet-woo-product-thumbnail,
	.thcat-product-media,
	.woocommerce-loop-product__link,
	.thps-catalog-card__image,
	.thps__card-image
) {
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.thps-voucher-card :where(
	.jet-woo-products__thumb-wrap,
	.jet-woo-product-thumbnail,
	.thcat-product-media,
	.thps-catalog-card__image,
	.thps__card-image
) {
	position: relative !important;
	display: flex !important;
	width: 100% !important;
	height: clamp(180px, 18vw, 235px) !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	background: #f4f4ef !important;
}

.thps-voucher-card :where(
	.jet-woo-product-thumbnail,
	.jet-woo-product-thumbnail > a,
	.woocommerce-loop-product__link,
	.thps-catalog-card__image,
	.thps__card-image
) > img,
.thps-voucher-card > a.woocommerce-loop-product__link > img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	padding: clamp(20px, 3vw, 38px) !important;
	box-sizing: border-box !important;
	object-fit: contain !important;
	object-position: center !important;
	background: transparent !important;
	transform: none !important;
}

.thps-voucher-card :where(
	.jet-woo-products__item-content,
	.thps-catalog-card__body,
	.thps__card-body,
	.woocommerce-loop-product__title,
	.thcat-product-kicker
) {
	position: relative !important;
	z-index: 2 !important;
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

@media (max-width: 767px) {
	.thps-voucher-card :where(
		.jet-woo-products__thumb-wrap,
		.jet-woo-product-thumbnail,
		.thcat-product-media,
		.thps-catalog-card__image,
		.thps__card-image
	) {
		height: clamp(160px, 52vw, 220px) !important;
	}

	.thps-voucher-card :where(
		.jet-woo-product-thumbnail,
		.jet-woo-product-thumbnail > a,
		.woocommerce-loop-product__link,
		.thps-catalog-card__image,
		.thps__card-image
	) > img,
	.thps-voucher-card > a.woocommerce-loop-product__link > img {
		padding: clamp(18px, 7vw, 30px) !important;
	}
}
