fix: content duplication

Author: jagoral

Diff for: docs/content/guides/7.multistore/3.patterns/5.subpath/1.subpath.md

@@ -105,110 +105,6 @@ export const config = {
 } satisfies Integration<Config>;
 ```
 
-## Customizing Store Appearance with CSS Variables
-
-To create distinct visual identities for each store, you can define CSS variables that change based on the store config ID. This is a powerful way to maintain a consistent component library while applying different themes.
-
-::tabs{:titles='["Next.js", "Nuxt"]'}
-
-#tab-1
-In your Next.js app, add custom CSS variables in your global styles:
-
-```scss
-// apps/storefront-unified-nextjs/app/[locale]/globals.scss
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-// Base styles...
-
-// Electronics store theme
-.electronics {
-  --colors-primary-50: 45 249 255;
-  --colors-primary-100: 233 243 255;
-  --colors-primary-200: 200 224 255;
-  --colors-primary-300: 166 204 255;
-  --colors-primary-400: 110 161 255;
-  --colors-primary-500: 51 117 255;
-  --colors-primary-600: 46 106 230;
-  --colors-primary-700: 38 78 191;
-  --colors-primary-800: 29 63 153;
-  --colors-primary-900: 176 196 244;
-}
-
-// Apparel store theme (different color scheme)
-.apparel {
-  --colors-primary-50: 243 254 249;
-  --colors-primary-100: 224 247 235;
-  --colors-primary-200: 187 235 210;
-  --colors-primary-300: 135 216 177;
-  --colors-primary-400: 77 192 140;
-  --colors-primary-500: 45 165 116;
-  --colors-primary-600: 34 134 95;
-  --colors-primary-700: 31 110 80;
-  --colors-primary-800: 30 86 65;
-  --colors-primary-900: 23 64 49;
-}
-```
-
-#tab-2
-In your Nuxt app, add custom CSS variables in your style.scss:
-
-```scss
-// apps/storefront-unified-nuxt/assets/style.scss
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-// Base styles...
-
-// Electronics store theme
-.electronics {
-  --colors-primary-50: 45 249 255;
-  --colors-primary-100: 233 243 255;
-  --colors-primary-200: 200 224 255;
-  --colors-primary-300: 166 204 255;
-  --colors-primary-400: 110 161 255;
-  --colors-primary-500: 51 117 255;
-  --colors-primary-600: 46 106 230;
-  --colors-primary-700: 38 78 191;
-  --colors-primary-800: 29 63 153;
-  --colors-primary-900: 176 196 244;
-}
-
-// Apparel store theme (different color scheme)
-.apparel {
-  --colors-primary-50: 243 254 249;
-  --colors-primary-100: 224 247 235;
-  --colors-primary-200: 187 235 210;
-  --colors-primary-300: 135 216 177;
-  --colors-primary-400: 77 192 140;
-  --colors-primary-500: 45 165 116;
-  --colors-primary-600: 34 134 95;
-  --colors-primary-700: 31 110 80;
-  --colors-primary-800: 30 86 65;
-  --colors-primary-900: 23 64 49;
-}
-```
-::
-
-::tip Using CSS Variables with Tailwind
-The CSS variables we defined can be used with Tailwind's color system. For example, `bg-primary-500` will use the store-specific primary color defined in the CSS variables. For more information, see the [Tailwind CSS documentation](https://v3.tailwindcss.com/docs/customizing-colors#using-css-variables).
-::
-
-::tip Understanding Generated CSS
-When using store-specific variants like `electronics:!bg-primary-600`, Tailwind generates scoped CSS rules. For example:
-
-```css
-.electronics .electronics\:\!bg-primary-600 {
-    --tw-bg-opacity: 1 !important;
-    background-color: rgb(46 106 230 / 1 !important) !important;
-}
-```
-
-This ensures the styles only apply when two conditions are met: the parent element must have the `.electronics` class and the target element must have the `electronics:!bg-primary-600` class.
-::
-
 ## Setting Up the Storefront
 
 Now you need to configure your Storefront to send the appropriate config ID to the Middleware based on the current URL path.