/* SLD homepage product sections. Ported from Convert SLD030.
 *
 * Same visual result, but the images carry real width/height so the rows occupy their final
 * height immediately. The Convert version appended these after paint with undimensioned images,
 * which pushed everything below them down twice - once on insert, again on decode.
 */

.sld-ps { margin-bottom: 40px; }

.page #main-content .sld-ps .sld-ps__heading {
	text-align: center;
	font-weight: normal !important;
	width: 100%;
	display: block;
	font-size: 32px;
}

.sld-ps__badges {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.sld-ps__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border-radius: 20px;
	padding: 4px 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	background: #034a92;
	border: 1px solid #034a92;
	color: #fff;
}

.sld-ps__badge--outline {
	background: #fff;
	border-color: #034a92;
	color: #034a92;
	font-size: 12px;
	font-weight: 600;
	align-items: flex-start;
}

.sld-ps__badge--grey {
	border-color: #5d5d5d;
	color: #5d5d5d;
}

.sld-ps__badge sup { font-size: 8px; line-height: 1; }

.sld-ps .product-item { padding: 15px 0; }

.sld-ps .product-item,
.sld-ps .product-item .info {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.sld-ps .product-item .info,
.sld-ps .product-item .info .name { padding: 0; }

.sld-ps .product-item .info .name {
	font-size: 14px;
	color: #000;
	font-weight: 500;
	line-height: 20px;
}

/* Reserve the tile image box so a lazy image cannot resize the row as it decodes. */
.sld-ps .main-img img {
	display: block;
	width: 100%;
	height: auto;
}