Refactor ProductHeroV2 layout (#4866)

<!--
PR title: GRW-123 / Feature / Awesome new thing
-->

## Describe your changes
Colocate `ProductHero` specific styles
<!--
What changes are made?
If there are many changes, a list might be a good format.
If it makes sense, add screenshots and/or screen recordings here.
-->

## Justify why they are needed
Colocation 

## Checklist before requesting a review

- [ ] I have performed a self-review of my code

apps/store/src/features/priceCalculator/PriceCalculatorCmsPage/PriceCalculatorCmsPageContent/PriceCalculatorCmsPageContent.css.ts

@@ -30,14 +30,12 @@ export const pageGrid = style({
 export const productHeroSection = style([
   yStack({ justifyContent: 'center' }),
   {
-    height: '13rem',
-    alignSelf: 'start',
-
     ...responsiveStyles({
       lg: {
         position: 'sticky',
         top: 0,
         gridColumn: '1 / span 7',
+        alignSelf: 'start',
         minHeight: `calc(100vh - ${HEADER_HEIGHT_DESKTOP})`,
       },
     }),
@@ -54,19 +52,6 @@ export const priceCalculatorSection = style({
   }),
 })
 
-export const productHero = style({
-  display: 'flex',
-  gap: tokens.space.xs,
-
-  ...responsiveStyles({
-    lg: {
-      gap: tokens.space.md,
-      // Visually center Product Hero
-      marginTop: `calc(-1 * ${HEADER_HEIGHT_DESKTOP})`,
-    },
-  }),
-})
-
 export const purchaseSummaryWrapper = style([
   yStack({ alignItems: 'center', justifyContent: 'center' }),
   { height: '100%' },

apps/store/src/features/priceCalculator/PriceCalculatorCmsPage/PriceCalculatorCmsPageContent/PriceCalculatorCmsPageContent.tsx

@@ -10,7 +10,6 @@ import { CartToast } from './CartToast/CartToast'
 import {
   pageGrid,
   priceCalculatorSection,
-  productHero,
   productHeroSection,
   purchaseSummaryWrapper,
   purchaseSummary,
@@ -26,7 +25,7 @@ export function PriceCalculatorCmsPageContent() {
     <div className={pageGrid}>
       {showProductHero && (
         <section className={productHeroSection}>
-          <ProductHeroV2 className={productHero} />
+          <ProductHeroV2 />
         </section>
       )}
       <section className={priceCalculatorSection}>

apps/store/src/features/priceCalculator/ProductHeroV2/ProductHeroV2.css.ts

@@ -1,6 +1,21 @@
 import { style } from '@vanilla-extract/css'
 import { badgeFontColor } from 'ui/src/components/Badge/Badge.css'
-import { responsiveStyles, tokens } from 'ui'
+import { responsiveStyles, tokens, yStack } from 'ui'
+import { HEADER_HEIGHT_DESKTOP } from '@/components/Header/Header.css'
+
+export const productHeroWrapper = style([
+  yStack({ justifyContent: 'center', alignItems: 'center', gap: { _: 'xs', lg: 'md' } }),
+  {
+    height: '13rem',
+
+    ...responsiveStyles({
+      lg: {
+        // Visually center Product Hero
+        marginTop: `calc(-1 * ${HEADER_HEIGHT_DESKTOP})`,
+      },
+    }),
+  },
+])
 
 export const pillowWrapper = style({
   position: 'relative',

apps/store/src/features/priceCalculator/ProductHeroV2/ProductHeroV2.tsx

@@ -1,9 +1,8 @@
 'use client'
-import { clsx } from 'clsx'
 import type { Variants } from 'framer-motion'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useRef } from 'react'
-import { Badge, framerTransitions, Heading, sprinkles, Text, yStack } from 'ui'
+import { Badge, framerTransitions, Heading, sprinkles, Text } from 'ui'
 import { Pillow } from '@/components/Pillow/Pillow'
 import { useProductData } from '@/components/ProductData/ProductDataProvider'
 import { useSelectedOffer } from '@/components/ProductPage/PurchaseForm/useSelectedOffer'
@@ -13,6 +12,7 @@ import {
   pillowWrapper,
   priceLabel,
   priceWrapper,
+  productHeroWrapper,
   subTypeBadge,
   subTypeLabel,
 } from './ProductHeroV2.css'
@@ -26,7 +26,7 @@ const ANIMATION: Variants = {
 }
 const TRANSITION = { duration: 0.3, ...framerTransitions.easeInOutCubic }
 
-export function ProductHeroV2({ className }: { className?: string }) {
+export function ProductHeroV2() {
   const ref = useRef(null)
   const productData = useProductData()
   const [selectedOffer] = useSelectedOffer()
@@ -74,7 +74,7 @@ export function ProductHeroV2({ className }: { className?: string }) {
         }
       </StickyProductHeader>
 
-      <div ref={ref} className={clsx(yStack({ alignItems: 'center' }), className)}>
+      <div ref={ref} className={productHeroWrapper}>
         <div className={pillowWrapper}>
           <Pillow
             size={{ _: 'xlarge', lg: 'xxlarge' }}