.nakedcat-related-products {
	margin-top: 3rem;
	padding: 2rem;
	background-color: #f7f7f7;
	border-top: 1px solid #dcdcde;
}

.nakedcat-related-products h2 {
	margin-top: 0;
}

/*
 * Force an explicit grid instead of relying on WooCommerce's own columns-N
 * CSS, which keys off viewport width — inside a narrower blog content column
 * that collapses to 1 column well before it actually needs to.
 */
.nakedcat-related-products .products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.nakedcat-related-products .products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

/*
 * WooCommerce's own CSS puts a `::before`/`::after` clearfix pseudo-element
 * on ul.products (content: ""; display: table) for its float-based layout.
 * CSS Grid gives generated pseudo-element boxes a cell by default, so once
 * this becomes a real grid it was occupying cell 1, shifting every product
 * over by one. Drop it entirely — floats aren't in play here anymore.
 */
.nakedcat-related-products .products::before,
.nakedcat-related-products .products::after {
	content: none !important;
	display: none !important;
}

@media ( max-width: 960px ) {
	.nakedcat-related-products .products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media ( max-width: 700px ) {
	.nakedcat-related-products .products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media ( max-width: 525px ) {
	.nakedcat-related-products .products {
		grid-template-columns: 1fr;
	}
}

.nakedcat-related-posts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nakedcat-related-posts li {
	margin-bottom: 0.5em;
}