Add palette value for product card top border

Author: emma-imber

dotcom-rendering/src/components/InlineProductCard.tsx

@@ -70,7 +70,7 @@ const hideFromWide = css`
 const showcaseCard = css`
 	${baseCard};
 	background-color: ${palette('--product-card-background')};
-	border-top: 1px solid ${palette('--section-border-lifestyle')};
+	border-top: 1px solid ${palette('--product-card-border')};
 `;
 
 const productCard = css`

dotcom-rendering/src/components/LeftColProductCard.tsx

@@ -35,7 +35,7 @@ const card = css`
 		position: sticky;
 		display: block;
 		width: 220px;
-		border-top: 1px solid ${palette('--section-border-lifestyle')};
+		border-top: 1px solid ${palette('--product-card-border')};
 	}
 	img {
 		height: 220px;

dotcom-rendering/src/paletteDeclarations.ts

@@ -5094,6 +5094,11 @@ const productCardBackgroundLight: PaletteFunction = () =>
 const productCardBackgroundDark: PaletteFunction = () =>
 	sourcePalette.neutral[97];
 
+const productCardBorderLight: PaletteFunction = () =>
+	sourcePalette.lifestyle[300];
+const productCardBorderDark: PaletteFunction = () =>
+	sourcePalette.lifestyle[300];
+
 const privacyTextRegularLight: PaletteFunction = () => sourcePalette.neutral[7];
 const privacyTextDark: PaletteFunction = () => sourcePalette.neutral[86];
 const witnessTitleText: PaletteFunction = ({ theme }) => {
@@ -7540,6 +7545,10 @@ const paletteColours = {
 		light: productCardBackgroundLight,
 		dark: productCardBackgroundDark,
 	},
+	'--product-card-border': {
+		light: productCardBorderLight,
+		dark: productCardBorderDark,
+	},
 	'--pullquote-background': {
 		light: pullQuoteBackgroundLight,
 		dark: pullQuoteBackgroundDark,