fix: separate woocommerce, misc styles

assets/newspack-ui/scss/elements/_index.scss

@@ -1,25 +1,7 @@
 @use 'boxes';
 @use 'forms';
 @use 'icons';
+@use 'misc';
 @use 'tables';
 @use 'typography';
-
-// TODO: Find a better home for this:
-.newspack-ui {
-	&__word-divider {
-		align-items: center;
-		display: flex;
-		font-size: var( --newspack-ui-font-size-small );
-		gap: var( --newspack-ui-spacer-2 );
-		justify-content: space-evenly;
-		margin: var( --newspack-ui-spacer-5 ) 0;
-
-		&::before,
-		&::after {
-			border-top: 1px solid var( --newspack-ui-color-border );
-			content: '';
-			display: block;
-			width: 100%;
-		}
-	}
-}
+@use 'woocommerce';

assets/newspack-ui/scss/elements/misc/_index.scss

@@ -0,0 +1 @@
+@use 'word-divider';

assets/newspack-ui/scss/elements/misc/_word-divider.scss

@@ -0,0 +1,16 @@
+.newspack-ui__word-divider {
+	align-items: center;
+	display: flex;
+	font-size: var( --newspack-ui-font-size-small );
+	gap: var( --newspack-ui-spacer-2 );
+	justify-content: space-evenly;
+	margin: var( --newspack-ui-spacer-5 ) 0;
+
+	&::before,
+	&::after {
+		border-top: 1px solid var( --newspack-ui-color-border );
+		content: '';
+		display: block;
+		width: 100%;
+	}
+}

assets/newspack-ui/scss/elements/woocommerce/_index.scss

@@ -0,0 +1 @@
+@use 'overrides';

assets/newspack-ui/scss/elements/woocommerce/_overrides.scss

@@ -0,0 +1,12 @@
+// Some general overrides for WooCommerce styles.
+.newspack-ui {
+	form p {
+		margin: 0 0 var( --newspack-ui-spacer-5 );
+	}
+
+	&__modal__small {
+		form p {
+			margin: 0 0 var( --newspack-ui-spacer-2 );
+		}
+	}
+}

assets/newspack-ui/style.scss

@@ -21,15 +21,4 @@
 	a:hover {
 		color: inherit !important;
 	}
-
-	// TODO: This specifically is a WooCommerce HTML structure; have been using it for other elements so far, but do we want to?
-	form p {
-		margin: 0 0 var( --newspack-ui-spacer-5 );
-	}
-
-	.newspack-ui__modal__small {
-		form p {
-			margin: 0 0 var( --newspack-ui-spacer-2 );
-		}
-	}
 }