Spearhead: Further work on first pass

spearhead/assets/sass/block-extends/_woocommerce.scss

@@ -1,12 +1,36 @@
-body.woocommerce #page .site-header {
-	.primary-navigation {
-		flex-basis: 50%;
+body[class*="woocommerce"] #page {
+	.site-header {
+		.primary-navigation {
+			flex-basis: 50%;
+		}
+		.woo-navigation {
+			flex-direction: row;
+			padding-left: 1.2em;
+			margin-left: auto;
+			.woocommerce-cart-link {
+				line-height: inherit;
+			}
+		}
 	}
-	.woo-navigation {
-		flex-direction: row;
-		padding: 0 1.2em;
-		.woocommerce-cart-link {
-			line-height: inherit;
+	.woocommerce-tabs {
+		ul.tabs {
+			li {
+				a {
+					color: var(--button--color-text);
+					padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+					&:hover {
+						color: var(--button--color-text-hover);
+					}
+				}
+				&.active a {
+					color: var(--global--color-foreground);
+				}
+			}
+		}
+		.panel {
+			h2 {
+				font-family: var(--global--font-secondary);
+			}
 		}
 	}
 }
@@ -46,3 +70,7 @@ body.woocommerce #page .site-header {
 .single-product #page #woocommerce-wrapper div.product div.summary p.price {
 	color: var(--global--color-foreground);
 }
+
+.product_meta {
+	color: var(--global--color-foreground-low-contrast);
+}

spearhead/style-rtl.css

@@ -697,19 +697,37 @@ ul.wp-block-categories,
 	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
-body.woocommerce #page .site-header .primary-navigation {
+body[class*="woocommerce"] #page .site-header .primary-navigation {
 	flex-basis: 50%;
 }
 
-body.woocommerce #page .site-header .woo-navigation {
+body[class*="woocommerce"] #page .site-header .woo-navigation {
 	flex-direction: row;
-	padding: 0 1.2em;
+	padding-right: 1.2em;
+	margin-right: auto;
 }
 
-body.woocommerce #page .site-header .woo-navigation .woocommerce-cart-link {
+body[class*="woocommerce"] #page .site-header .woo-navigation .woocommerce-cart-link {
 	line-height: inherit;
 }
 
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
+	color: var(--button--color-text);
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a:hover {
+	color: var(--button--color-text-hover);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active a {
+	color: var(--global--color-foreground);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs .panel h2 {
+	font-family: var(--global--font-secondary);
+}
+
 #content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-onsale {
 	top: -0.5em;
 	left: -0.5em;
@@ -740,6 +758,10 @@ body.woocommerce #page .site-header .woo-navigation .woocommerce-cart-link {
 	color: var(--global--color-foreground);
 }
 
+.product_meta {
+	color: var(--global--color-foreground-low-contrast);
+}
+
 .screen-reader-text, .search-form input[type="submit"] {
 	/* Text meant only for screen readers. */
 	border: 0;

spearhead/style.css

@@ -697,19 +697,37 @@ ul.wp-block-categories,
 	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
-body.woocommerce #page .site-header .primary-navigation {
+body[class*="woocommerce"] #page .site-header .primary-navigation {
 	flex-basis: 50%;
 }
 
-body.woocommerce #page .site-header .woo-navigation {
+body[class*="woocommerce"] #page .site-header .woo-navigation {
 	flex-direction: row;
-	padding: 0 1.2em;
+	padding-left: 1.2em;
+	margin-left: auto;
 }
 
-body.woocommerce #page .site-header .woo-navigation .woocommerce-cart-link {
+body[class*="woocommerce"] #page .site-header .woo-navigation .woocommerce-cart-link {
 	line-height: inherit;
 }
 
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
+	color: var(--button--color-text);
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a:hover {
+	color: var(--button--color-text-hover);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active a {
+	color: var(--global--color-foreground);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs .panel h2 {
+	font-family: var(--global--font-secondary);
+}
+
 #content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-onsale {
 	top: -0.5em;
 	right: -0.5em;
@@ -740,6 +758,10 @@ body.woocommerce #page .site-header .woo-navigation .woocommerce-cart-link {
 	color: var(--global--color-foreground);
 }
 
+.product_meta {
+	color: var(--global--color-foreground-low-contrast);
+}
+
 .screen-reader-text, .search-form input[type="submit"] {
 	/* Text meant only for screen readers. */
 	border: 0;