Better grouped product styles.

Author: spencerfinnell

app/customize/output/color-gray-600.php

@@ -44,6 +44,7 @@
 		'selectors'    => [
 			'.product__has-variations .button.button--pill',
 			'.widget_layered_nav_filters .button.button--pill',
+			'.woocommerce-grouped-product-list-item__quantity .button',
 		],
 		'declarations' => [
 			'color'            => esc_attr( $gray600 ),

resources/assets/scss/mixins/card.scss

@@ -14,3 +14,10 @@
 	background: rgba($color, 0.1);
 	box-shadow: inset rgba($color, 0.1) 0 0 0 3px, rgba($color, 0.3) 0 1px 2px;
 }
+
+@mixin card--reset() {
+	padding: 0;
+	background: none;
+	border: 0;
+	box-shadow: none;
+}

resources/assets/scss/modules/woocommerce-single-product-purchase.scss

@@ -20,6 +20,11 @@
 		max-width: 400px;
 	}
 
+	&--grouped {
+
+		@include card--reset();
+	}
+
 	.stock {
 		font-size: $font-size-sm;
 		margin-top: 0;
@@ -39,9 +44,10 @@
 }
 
 .woocommerce-grouped-product-list {
-	margin-bottom: $spacer;
 
-	@include vertical-spacing("margin", "up");
+	@include vertical-spacing("margin", "both", (
+		sm: 1,
+	));
 }
 
 .woocommerce-grouped-product-list-item {
@@ -63,6 +69,12 @@
 	.action-list__item-label {
 		flex: 0;
 	}
+
+	.button {
+
+		@include button--pill();
+		@include button--size-xs();
+	}
 }
 
 .woocommerce-grouped-product-list-item__price {