changes to the woocommerce tabs to fit design. Rebased trunk

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

@@ -14,7 +14,16 @@ body[class*="woocommerce"] #page {
 	}
 	.woocommerce-tabs {
 		ul.tabs {
+			padding-left: calc( 0.3 * var(--global--spacing-horizontal));
+			margin-bottom: calc( 2 * var(--global--spacing-vertical));
 			li {
+				background-color: var(--global--color-foreground-low-contrast);
+				&:before {
+					box-shadow: 2px 2px 0 var(--global--color-foreground-low-contrast);
+				}
+				&:after {
+					box-shadow: -2px 2px 0 var(--global--color-foreground-low-contrast);
+				}
 				a {
 					color: var(--button--color-text);
 					padding: var(--button--padding-vertical) var(--button--padding-horizontal);
@@ -28,6 +37,7 @@ body[class*="woocommerce"] #page {
 			}
 		}
 		.panel {
+			margin-bottom: calc( 2 * var(--global--spacing-vertical));
 			h2 {
 				font-family: var(--global--font-secondary);
 			}

spearhead/style-rtl.css

@@ -711,6 +711,23 @@ body[class*="woocommerce"] #page .site-header .woo-navigation .woocommerce-cart-
 	line-height: inherit;
 }
 
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs {
+	padding-right: calc( 0.3 * var(--global--spacing-horizontal));
+	margin-bottom: calc( 2 * var(--global--spacing-vertical));
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
+	background-color: var(--global--color-foreground-low-contrast);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li:before {
+	box-shadow: -2px 2px 0 var(--global--color-foreground-low-contrast);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li:after {
+	box-shadow: 2px 2px 0 var(--global--color-foreground-low-contrast);
+}
+
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
 	color: var(--button--color-text);
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
@@ -724,6 +741,10 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active a {
 	color: var(--global--color-foreground);
 }
 
+body[class*="woocommerce"] #page .woocommerce-tabs .panel {
+	margin-bottom: calc( 2 * var(--global--spacing-vertical));
+}
+
 body[class*="woocommerce"] #page .woocommerce-tabs .panel h2 {
 	font-family: var(--global--font-secondary);
 }

spearhead/style.css

@@ -711,6 +711,23 @@ body[class*="woocommerce"] #page .site-header .woo-navigation .woocommerce-cart-
 	line-height: inherit;
 }
 
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs {
+	padding-left: calc( 0.3 * var(--global--spacing-horizontal));
+	margin-bottom: calc( 2 * var(--global--spacing-vertical));
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
+	background-color: var(--global--color-foreground-low-contrast);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li:before {
+	box-shadow: 2px 2px 0 var(--global--color-foreground-low-contrast);
+}
+
+body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li:after {
+	box-shadow: -2px 2px 0 var(--global--color-foreground-low-contrast);
+}
+
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
 	color: var(--button--color-text);
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
@@ -724,6 +741,10 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active a {
 	color: var(--global--color-foreground);
 }
 
+body[class*="woocommerce"] #page .woocommerce-tabs .panel {
+	margin-bottom: calc( 2 * var(--global--spacing-vertical));
+}
+
 body[class*="woocommerce"] #page .woocommerce-tabs .panel h2 {
 	font-family: var(--global--font-secondary);
 }