diff --git a/src/layouts/grid/styles.scss b/src/layouts/grid/styles.scss
index 1cce9aa8..2705f15d 100644
--- a/src/layouts/grid/styles.scss
+++ b/src/layouts/grid/styles.scss
@@ -1,5 +1,32 @@
 @use '../../styles/variables' as *;
 
+// =============================================================================
+// CSS @property declarations for non-inheriting custom properties
+// =============================================================================
+// By default, CSS custom properties (variables) inherit from parent elements.
+// This causes issues when a parent Grid sets responsive sizing variables
+// - all child components would inherit and use these values even if they
+// didn't set their own.
+//
+// Using @property with `inherits: false` prevents this cascade, ensuring each
+// Grid/GridItem instance only uses the variables it explicitly sets on itself.
+@property --kiba-grid-height { syntax: "*"; inherits: false; }
+@property --kiba-grid-child-alignment { syntax: "*"; inherits: false; }
+@property --kiba-grid-content-alignment { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-width { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-width-sm { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-width-md { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-width-lg { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-width-xl { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-display { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-display-sm { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-display-md { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-display-lg { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-display-xl { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-gutter { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-alignment { syntax: "*"; inherits: false; }
+@property --kiba-grid-item-overflow-y { syntax: "*"; inherits: false; }
+
 @layer kiba-structure {
   .KibaGrid {
     box-sizing: border-box;
diff --git a/src/layouts/stack/styles.scss b/src/layouts/stack/styles.scss
index 959aa88b..3d2afa2d 100644
--- a/src/layouts/stack/styles.scss
+++ b/src/layouts/stack/styles.scss
@@ -1,5 +1,61 @@
 @use '../../styles/variables' as *;
 
+// =============================================================================
+// CSS @property declarations for non-inheriting custom properties
+// =============================================================================
+// By default, CSS custom properties (variables) inherit from parent elements.
+// This causes issues when a parent Stack sets responsive variables
+// (e.g. --kiba-stack-direction-large: row) - all child Stacks would inherit
+// and use these values even if they didn't set their own.
+//
+// Using @property with `inherits: false` prevents this cascade, ensuring each
+// Stack instance only uses the variables it explicitly sets on itself.
+@property --kiba-stack-direction-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-direction-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-direction-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-direction-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-direction-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-child-alignment-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-child-alignment-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-child-alignment-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-child-alignment-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-child-alignment-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-content-alignment-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-content-alignment-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-content-alignment-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-content-alignment-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-content-alignment-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-height-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-height-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-height-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-height-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-height-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-width-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-height-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-max-width-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-height-extraLarge { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-base { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-small { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-medium { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-large { syntax: "*"; inherits: false; }
+@property --kiba-stack-min-width-extraLarge { syntax: "*"; inherits: false; }
+
 @layer kiba-structure {
   .KibaStack {
     display: flex;
diff --git a/src/particles/box/styles.scss b/src/particles/box/styles.scss
index f9193301..2909b8b8 100644
--- a/src/particles/box/styles.scss
+++ b/src/particles/box/styles.scss
@@ -1,5 +1,46 @@
 @use '../../styles/variables' as *;
 
+// =============================================================================
+// CSS @property declarations for non-inheriting custom properties
+// =============================================================================
+// By default, CSS custom properties (variables) inherit from parent elements.
+// This causes issues when a parent Box sets responsive sizing variables
+// (e.g. --kiba-box-height-md: 300px) - all child components would inherit
+// and use these values even if they didn't set their own.
+//
+// Using @property with `inherits: false` prevents this cascade, ensuring each
+// Box instance only uses the variables it explicitly sets on itself.
+@property --kiba-box-width { syntax: "*"; inherits: false; }
+@property --kiba-box-width-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-width-md { syntax: "*"; inherits: false; }
+@property --kiba-box-width-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-width-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-height { syntax: "*"; inherits: false; }
+@property --kiba-box-height-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-height-md { syntax: "*"; inherits: false; }
+@property --kiba-box-height-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-height-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width-md { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-max-width-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height-md { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-max-height-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width-md { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-min-width-xl { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height-sm { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height-md { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height-lg { syntax: "*"; inherits: false; }
+@property --kiba-box-min-height-xl { syntax: "*"; inherits: false; }
+
 // Mixins for use by other components
 @mixin default {
   background-color: transparent;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 98441b31..320dbc4a 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -5,79 +5,6 @@
 // These are in the kiba-reset layer so component styles in kiba-theme
 // will always take precedence.
 
-// =============================================================================
-// CSS @property declarations for non-inheriting custom properties
-// =============================================================================
-// By default, CSS custom properties (variables) inherit from parent elements.
-// This causes issues when a parent Box/Stack sets responsive sizing variables
-// (e.g. --kiba-box-height-md: 300px) - all child components would inherit
-// and use these values even if they didn't set their own.
-//
-// Using @property with `inherits: false` prevents this cascade, ensuring each
-// component instance only uses the variables it explicitly sets on itself.
-// Browser support: Chrome 85+, Safari 15.4+, Firefox 128+ (universal by 2024)
-@property --kiba-box-width { syntax: "*"; inherits: false; }
-@property --kiba-box-width-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-width-md { syntax: "*"; inherits: false; }
-@property --kiba-box-width-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-width-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-height { syntax: "*"; inherits: false; }
-@property --kiba-box-height-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-height-md { syntax: "*"; inherits: false; }
-@property --kiba-box-height-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-height-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width-md { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-max-width-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height-md { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-max-height-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width-md { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-min-width-xl { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height-sm { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height-md { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height-lg { syntax: "*"; inherits: false; }
-@property --kiba-box-min-height-xl { syntax: "*"; inherits: false; }
-
-@property --kiba-stack-height-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-height-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-height-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-height-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-height-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-width-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-height-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-max-width-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-height-extraLarge { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-base { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-small { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-medium { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-large { syntax: "*"; inherits: false; }
-@property --kiba-stack-min-width-extraLarge { syntax: "*"; inherits: false; }
-
 @layer kiba-reset {
   html {
     scroll-behavior: smooth;