Update to match designs

Author: emma-imber

dotcom-rendering/fixtures/manual/productBlockElement.ts

@@ -4,7 +4,7 @@ import { productImage } from './productImage';
 export const exampleProduct: ProductBlockElement = {
 	_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
 	elementId: 'b1f6e8e2-3f3a-4f0c-8d1e-5f3e3e3e3e3e',
-	primaryHeadingHtml: '<em>Best Kettle overall</em>',
+	primaryHeadingHtml: 'Best overall',
 	secondaryHeadingHtml: 'Bosch Sky Kettle',
 	brandName: 'Bosch',
 	productName: 'Sky Kettle',

dotcom-rendering/src/components/HorizontalSummaryProductCard.tsx

@@ -65,15 +65,12 @@ const productCardHeading = css`
 	color: ${palette('--product-card-headline')};
 `;
 
-const productNameFont = css`
+const secondaryHeading = css`
 	${headlineMedium17};
 `;
 
 const price = css`
 	margin-top: auto;
-	${from.phablet} {
-		margin-top: 0;
-	}
 	${textSansBold17};
 `;
 
@@ -103,7 +100,7 @@ export const HorizontalSummaryProductCard = ({
 						__html: product.primaryHeadingHtml,
 					}}
 				></div>
-				<div css={productNameFont}>{product.productName}</div>
+				<div css={secondaryHeading}>{product.secondaryHeadingHtml}</div>
 				<a href={`#${product.h2Id}`} css={readMore}>
 					Read more
 				</a>