/* The managed section reuses Blocksy's related-products markup and cards. */
.single-product .related.products.ct-hidden-sm,
.single-product .related.products.ct-hidden-md { display: block !important; }

/* Related-card content alignment. */
.single-product .related.products .price {
	display: flex !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	justify-content: flex-end;
	text-align: right !important;
}

.single-product .related.products .price .amount {
	font-size: 19px !important;
	font-weight: 700 !important;
}

.single-product .related.products .price:has(.amount) {
	align-self: flex-end;
	justify-content: center;
	margin-block-end: 12px !important;
	margin-block-start: auto !important;
	margin-inline: auto 20px !important;
	max-width: calc(100% - 40px);
	text-align: center !important;
	width: 120px;
}

.single-product .related.products .price:has(.amount) .amount {
	text-align: center !important;
}

.single-product .related.products .entry-meta {
	display: none !important;
	margin: 0 !important;
}

.single-product .related.products .ct-woo-card-actions {
	justify-content: flex-end;
}

.single-product .related.products .ct-woo-card-actions .add_to_cart_button {
	box-sizing: border-box;
	flex: 0 1 120px;
	justify-content: center;
	max-width: 100%;
	width: 120px;
}

.single-product .related.products .price:has(.amount) ~ .ct-woo-card-actions {
	margin-block-start: 0 !important;
}

@media (min-width: 690px) and (max-width: 999.98px) {
	.single-product .related.products ul.products,
	.single-product .related.products [data-products] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 689.98px) {
	.single-product .related.products ul.products,
	.single-product .related.products [data-products] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.single-product .related.products .woocommerce-loop-product__title { overflow-wrap: anywhere; }
}

/* Compact recommendation cards on mobile product detail pages. */
@media (max-width: 780px) {
	html body.single-product section.related.products {
		margin-top: 32px;
		scroll-margin-top: 76px;
	}

	html body.single-product .related.products .ct-module-title {
		font-size: 22px;
		line-height: 1.3;
		margin-bottom: 16px;
	}

	html body.single-product #main-container .related.products ul.products {
		align-items: stretch;
		gap: 14px 12px;
		grid-auto-rows: 1fr;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	html body.single-product .related.products ul.products > li.product {
		border-radius: 10px;
		padding-bottom: 12px;
		scroll-margin-block: 76px 96px;
	}

	html body.single-product .related.products ul.products > li.product figure {
		margin-bottom: 10px !important;
	}

	html body.single-product .related.products ul.products > li.product .woocommerce-loop-product__title {
		font-size: 14px;
		line-height: 1.4;
		margin: 0 10px 10px !important;
		min-height: 2.8em;
		overflow-wrap: break-word;
	}

	html body.single-product .related.products ul.products > li.product .price {
		align-self: stretch;
		flex-wrap: wrap;
		font-size: 16px !important;
		gap: 2px 4px;
		justify-content: center;
		line-height: 1.4;
		margin: auto 10px 8px !important;
		max-width: calc(100% - 20px);
		min-height: 24px;
		min-width: 0;
		text-align: center !important;
		width: auto;
	}

	html body.single-product .related.products ul.products > li.product .price .amount {
		font-size: 16px !important;
	}

	html body.single-product .related.products ul.products > li.product .ct-woo-card-actions {
		justify-content: stretch;
		margin: auto 10px 0 !important;
	}

	html body.single-product .related.products ul.products > li.product .price ~ .ct-woo-card-actions {
		margin-top: 0 !important;
	}

	html body.single-product .related.products ul.products > li.product .ct-woo-card-actions .button {
		flex: 1 1 100%;
		font-size: 13px;
		line-height: 1.3;
		min-height: 44px;
		min-width: 0;
		padding: 7px 8px;
		scroll-margin-block: 76px 96px;
		touch-action: manipulation;
		white-space: normal;
		width: 100%;
	}
}
