/**
 * Location: /assets/css/frontend/product/single/related.css
 * Purpose: Styles single product related and cross-sell sections while reusing the global product card component.
 *
 * @package SunTechPortal
 */

.stp-product-single__related {
	padding: 24px;
	overflow: visible;
}

.stp-product-single__related-head {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.stp-product-single__related-head h2 {
	margin: 0;
}

.stp-product-single__related-head a {
	color: var(--stp-product-text);
	font-size: 13px;
	font-weight: 950;
	text-decoration: none;
}

.stp-product-single__related-head a:hover,
.stp-product-single__related-head a:focus {
	color: var(--stp-product-primary-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.stp-product-single__related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, var(--stp-product-card-width, 205px));
	gap: 14px;
	align-items: start;
	justify-content: start;
	overflow: visible;
}

.stp-product-single__related-grid > .stp-product-card {
	width: var(--stp-product-card-width, 205px);
	min-width: var(--stp-product-card-width, 205px);
	max-width: var(--stp-product-card-width, 205px);
	height: var(--stp-product-card-height, 330px);
	min-height: var(--stp-product-card-height, 330px);
	grid-template-rows: 27px 168px 1fr;
}

.stp-product-single__related-grid .stp-product-card__catalog-meta {
	min-height: 27px;
	padding: 6px 17px 3px;
}

.stp-product-single__related-grid .stp-product-card__media {
	height: 168px;
	min-height: 168px;
	max-height: 168px;
	padding: 0 17px;
	aspect-ratio: auto;
}

.stp-product-single__related-grid .stp-product-card__body {
	grid-template-rows: 42px 28px 38px;
	gap: 6px;
	padding: 4px 17px 10px;
}

.stp-product-single__related-grid .stp-product-card__title {
	height: 42px;
	min-height: 42px;
	max-height: 42px;
	font-size: 14px;
	line-height: 1.45;
}

.stp-product-single__related-grid .stp-product-card__summary {
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	min-height: 28px;
	max-height: 28px;
}

.stp-product-single__related-grid .stp-product-card__actions {
	display: grid;
	grid-template-columns: 38px 36px;
	gap: 9px;
	align-items: center;
	justify-content: space-between;
	min-height: 38px;
	max-height: 38px;
}

@media screen and (max-width: 680px) {
	.stp-product-single__related {
		padding: 18px;
	}
}