@import url('./product-page-modern-v140.css');

/* v1.5: related products become a readable vertical list on mobile. */
@media (max-width: 700px) {
	body.fspw-full-product-page .related.products ul.products,
	body.fspw-full-product-page .upsells.products ul.products,
	body.fspw-full-product-page .related.products ul.products[class*="columns-"],
	body.fspw-full-product-page .upsells.products ul.products[class*="columns-"] {
		display: grid !important;
		gap: 16px !important;
		grid-auto-flow: row !important;
		grid-template-columns: minmax(0, 1fr) !important;
		overflow: visible !important;
	}

	body.fspw-full-product-page .related.products ul.products > li.product,
	body.fspw-full-product-page .upsells.products ul.products > li.product,
	body.fspw-full-product-page .related.products ul.products[class*="columns-"] > li.product,
	body.fspw-full-product-page .upsells.products ul.products[class*="columns-"] > li.product {
		display: grid !important;
		font-size: 15px !important;
		grid-template-columns: minmax(100px, 38%) minmax(0, 1fr);
		grid-template-rows: auto;
		padding: 12px !important;
		width: 100% !important;
	}

	body.fspw-full-product-page .related.products ul.products > li.product > a:first-child,
	body.fspw-full-product-page .upsells.products ul.products > li.product > a:first-child {
		display: grid !important;
		gap: 10px 14px;
		grid-column: 1 / -1;
		grid-template-columns: minmax(100px, 38%) minmax(0, 1fr);
	}

	body.fspw-full-product-page .related.products ul.products > li.product img,
	body.fspw-full-product-page .upsells.products ul.products > li.product img {
		grid-column: 1;
		grid-row: 1 / span 4;
		height: clamp(120px, 36vw, 210px) !important;
		max-height: 210px !important;
		object-fit: contain !important;
	}

	body.fspw-full-product-page .related.products ul.products > li.product h2,
	body.fspw-full-product-page .related.products ul.products > li.product .woocommerce-loop-product__title,
	body.fspw-full-product-page .upsells.products ul.products > li.product h2,
	body.fspw-full-product-page .upsells.products ul.products > li.product .woocommerce-loop-product__title {
		font-size: clamp(16px, 4.5vw, 21px) !important;
		grid-column: 2;
		margin-top: 4px !important;
	}

	body.fspw-full-product-page .related.products ul.products > li.product .price,
	body.fspw-full-product-page .upsells.products ul.products > li.product .price {
		font-size: 16px !important;
		grid-column: 2;
	}

	body.fspw-full-product-page .related.products ul.products > li.product .button,
	body.fspw-full-product-page .upsells.products ul.products > li.product .button {
		font-size: 14px !important;
		grid-column: 2;
		margin-top: 8px !important;
		width: 100% !important;
	}
}

@media (max-width: 420px) {
	body.fspw-full-product-page .related.products ul.products > li.product,
	body.fspw-full-product-page .upsells.products ul.products > li.product {
		display: block !important;
	}

	body.fspw-full-product-page .related.products ul.products > li.product > a:first-child,
	body.fspw-full-product-page .upsells.products ul.products > li.product > a:first-child {
		display: block !important;
	}

	body.fspw-full-product-page .related.products ul.products > li.product img,
	body.fspw-full-product-page .upsells.products ul.products > li.product img {
		height: auto !important;
		max-height: 250px !important;
	}
}