Varia: Add preliminary support for WooCommerce.

varia/sass/vendors/_imports.scss

@@ -4,4 +4,5 @@
  */
 
 @import "jetpack";
+@import "woocommerce/woocommerce";
 // @import "wpcom";

varia/sass/vendors/woocommerce/_woocommerce.scss

@@ -0,0 +1,75 @@
+/**
+ * Main WooCommerce styles
+ */
+
+// Fonts
+$fontsize_small: map-deep-get($config-global, "font", "size", "sm");
+$fontsize_base: map-deep-get($config-global, "font", "size", "base");
+$fontsize_medium: map-deep-get($config-global, "font", "size", "md");
+$fontsize_large: map-deep-get($config-global, "font", "size", "lg");
+$fontsize_xl: map-deep-get($config-global, "font", "size", "xl");
+$font_line_height: map-deep-get($config-global, "font", "line-height", "body");
+$font_line_height_heading: map-deep-get($config-global, "font", "line-height", "heading");
+// Colors
+$color_primary: map-deep-get($config-global, "color", "primary", "default");
+$color_secondary: map-deep-get($config-global, "color", "secondary", "default");
+$color_subtext: map-deep-get($config-global, "color", "foreground", "light");
+$color_background: map-deep-get($config-global, "color", "background", "default");
+$color_foreground: map-deep-get($config-global, "color", "foreground", "default");
+$color_border_default: map-deep-get($config-global, "color", "border", "default");
+$color_border_light: map-deep-get($config-global, "color", "border", "light");
+$color_border_dark: map-deep-get($config-global, "color", "border", "dark");
+$color_highlight: map-deep-get($config-global, "color", "text-selection");
+// Spacing
+$spacing_base: (0.5 * map-deep-get($config-global, "spacing", "unit"));
+$spacing_unit: map-deep-get($config-global, "spacing", "unit");
+$spacing_horizontal: map-deep-get($config-global, "spacing", "horizontal");
+$spacing_vertical: map-deep-get($config-global, "spacing", "vertical");
+$border_radius: map-deep-get($config-global, "border-radius", "sm");
+
+.woocommerce {
+
+	a.remove {
+		font-size: 1.5rem;
+		height: 1rem;
+		width: 1rem;
+		color: red !important; // Required for default theme compatibility
+
+		&:hover {
+			color: #fff !important; // Required for default theme compatibility
+			background: red;
+		}
+	}
+
+	small.note {
+		color: $color_subtext;
+		font-size: $fontsize_small;
+		margin-top: $spacing_unit;
+	}
+
+	.woocommerce-breadcrumb {
+
+		margin-bottom: $spacing_vertical;
+		font-size: $fontsize_base;
+		color: $color_subtext;
+
+		a {
+			color: currentColor;
+		}
+	}
+
+}
+
+// Blocks
+@import "blocks/button/style";
+
+// Components
+@import "components/reviews";
+@import "components/star-rating";
+@import "components/tables";
+
+// Layout
+@import "layout/structure";
+
+// Pages
+@import "pages/product-page";

varia/sass/vendors/woocommerce/blocks/button/_style.scss

@@ -0,0 +1,21 @@
+/**
+ * Button
+ */
+
+.woocommerce #content { // adding #content here to override default wc styles without !important
+
+	#respond input#submit,
+	#respond input#submit.alt,
+	a.button,
+	a.button.alt,
+	button.button,
+	button.button.alt,
+	input.button,
+	input.button.alt,
+	.cart .button,
+	.cart input.button,
+	a.added_to_cart {
+		// Extend button style
+		@extend %button-style;
+	}
+}

varia/sass/vendors/woocommerce/components/_reviews.scss

@@ -0,0 +1,86 @@
+/**
+ * Reviews
+ */
+
+.woocommerce #content { // adding #content here to override default wc styles without !important
+
+	/**
+	 * Reviews
+	 */
+	#reviews {
+
+		h2 small {
+			color: $color_subtext;
+			font-size: $fontsize_small;
+			margin: inherit;
+
+			a {
+				color: currentColor;
+			}
+		}
+
+		#comments {
+
+			ol.commentlist {
+
+				li {
+					margin-bottom: $spacing_unit;
+
+					.meta {
+						color: $color_subtext;
+						font-size: $fontsize_small;
+					}
+
+					img.avatar {
+						float: left;
+						position: absolute;
+						top: 0;
+						left: 0;
+						padding: 3px;
+						width: 32px;
+						height: auto;
+						background: $color_secondary;
+						border-color: $color_border_default;
+						margin: 0;
+						box-shadow: none;
+					}
+
+					.comment-text {
+						margin: 0 0 0 50px;
+						border: 1px solid darken($color_secondary, 3%);
+						border-radius: 4px;
+						padding: 1em 1em 0;
+
+						p {
+							margin: 0 0 1em;
+						}
+
+						p.meta {
+							font-size: 0.83em;
+						}
+					}
+				}
+
+				ul.children {
+					list-style: none outside;
+					margin: 20px 0 0 50px;
+
+					.star-rating {
+						display: none;
+					}
+				}
+
+				#respond {
+					border: 1px solid darken($color_secondary, 3%);
+					border-radius: 4px;
+					padding: 1em 1em 0;
+					margin: 20px 0 0 50px;
+				}
+			}
+
+			.commentlist > li::before {
+				content: "";
+			}
+		}
+	}
+}

varia/sass/vendors/woocommerce/components/_star-rating.scss

@@ -0,0 +1,17 @@
+/**
+ * Star ratings
+ */
+
+.woocommerce #content { // adding #content here to override default wc styles without !important
+
+	.star-rating {
+
+		&::before {
+			color: $color_secondary;
+		}
+
+		span {
+			color: $color_secondary;
+		}
+	}
+}

varia/sass/vendors/woocommerce/components/_tables.scss

@@ -0,0 +1,85 @@
+/**
+ * Tables
+ */
+
+.woocommerce { // adding #content here to override default wc styles without !important
+
+	table.shop_attributes {
+		border-top-color: $color_border_light;
+		margin-bottom: $spacing_vertical;
+
+		th {
+			padding: $spacing_base;
+			border-bottom-color: $color_border_light;
+			line-height: $font_line_height;
+		}
+
+		td {
+			font-style: inherit;
+			border-bottom-color: $color_border_light;
+			line-height: $font_line_height;
+
+			p {
+				margin: 0;
+				padding: $spacing_base 0;
+			}
+		}
+
+		tr:nth-child(even) td,
+		tr:nth-child(even) th {
+			background: rgba(0, 0, 0, 0.025);
+		}
+	}
+
+	.woocommerce-cart #content & table.shop_table {
+		border-color: transparent;
+		border-radius: 0;
+
+		th {
+			border-color: $color_border_default;
+			padding: $spacing_base $spacing_unit;
+			line-height: $font_line_height;
+		}
+
+		td {
+			border-color: $color_border_default;
+			padding: $spacing_base $spacing_unit;
+			line-height: $font_line_height;
+		}
+
+		tfoot td,
+		tfoot th,
+		tbody th {
+			border-top-color: $color_border_light;
+		}
+	}
+
+	table.my_account_orders {
+		font-size: $fontsize_small;
+
+		th,
+		td {
+			padding: (0.5 * $spacing_base) $spacing_base;
+		}
+	}
+
+	td.product-name {
+
+		dl.variation,
+		.wc-item-meta {
+
+			dt,
+			.wc-item-meta-label {
+				margin-right: $spacing_base;
+			}
+		}
+
+		p.backorder_notification {
+			font-size: $fontsize_small;
+		}
+	}
+
+	td.product-quantity {
+		min-width: 80px;
+	}
+}

varia/sass/vendors/woocommerce/layout/_structure.scss

@@ -0,0 +1,19 @@
+/**
+ * Structure
+ */
+
+.woocommerce #content { // adding #content here to override default wc styles without !important
+
+	div.summary,
+	div.product .woocommerce-tabs .panel,
+	.products.related {
+
+		& > *:not(:first-child) {
+			margin-top: $spacing_vertical;
+		}
+
+		& > *:not(:last-child) {
+			margin-bottom: $spacing_vertical;
+		}
+	}
+}

varia/sass/vendors/woocommerce/pages/_product-page.scss

@@ -0,0 +1,189 @@
+/**
+ * Product Page
+ */
+.woocommerce #content { // adding #content here to override default wc styles without !important
+
+	div.product {
+
+		span.price,
+		p.price {
+			color: $color_primary;
+			font-size: $fontsize_xl;
+		}
+
+		p.stock {
+			font-size: $fontsize_base;
+		}
+
+		.stock {
+			color: $color_primary;
+		}
+
+		.out-of-stock {
+			color: red;
+		}
+
+		.woocommerce-product-rating {
+			margin-bottom: $spacing_vertical;
+		}
+
+		div.images {
+			margin-bottom: $spacing_vertical;
+
+			div.thumbnails {
+				padding-top: $spacing_unit;
+			}
+
+			.woocommerce-product-gallery__wrapper .zoomImg {
+				background-color: $color_background;
+			}
+
+			.woocommerce-product-gallery__image--placeholder {
+				border-color: $color_border_light;
+			}
+
+			.woocommerce-product-gallery__trigger {
+				font-size: $fontsize_medium;
+				background: $color_background;
+
+				&::before {
+					border-color: $color_border_dark;
+				}
+
+				&::after {
+					background-color: $color_border_dark;
+				}
+			}
+		}
+
+		div.summary {
+			margin-bottom: $spacing_vertical;
+		}
+
+		div.social {
+			margin-bottom: $spacing_vertical;
+		}
+
+		.woocommerce-tabs {
+
+			ul.tabs {
+				padding-left: $spacing_horizontal;
+				margin-bottom: $spacing_vertical;
+
+				li {
+					border-color: $color_border_default;
+					background-color: $color_secondary;
+					border-radius: $border_radius $border_radius 0 0;
+					padding-left: $spacing_horizontal;
+					padding-right: $spacing_horizontal;
+
+					a {
+						padding-top: (0.5 * $spacing_horizontal);
+						padding-bottom: (0.5 * $spacing_horizontal);
+						color: $color_secondary;
+
+						&:hover {
+							color: lighten($color_secondary, 10%);
+						}
+					}
+
+					&.active {
+						background-color: $color_background;
+						border-bottom-color: $color_background;
+
+						a {
+							color: inherit;
+							text-shadow: inherit;
+						}
+
+						&::before {
+							box-shadow: 2px 2px 0 $color_background;
+						}
+
+						&::after {
+							box-shadow: -2px 2px 0 $color_background;
+						}
+					}
+
+					&::before,
+					&::after {
+						border-color: $color_border_default;
+					}
+
+					&::before {
+						box-shadow: 2px 2px 0 $color_secondary;
+					}
+
+					&::after {
+						box-shadow: -2px 2px 0 $color_secondary;
+					}
+				}
+
+				&::before {
+					border-bottom-color: $color_border_default;
+				}
+			}
+
+			.panel {
+				margin-bottom: $spacing_vertical;
+			}
+		}
+
+		p.cart {
+			margin-bottom: $spacing_vertical;
+		}
+
+		form.cart {
+
+			.variations {
+				margin-bottom: $spacing_unit;
+
+				td,
+				th {
+					line-height: $font_line_height;
+				}
+
+				select {
+					margin-right: $spacing_unit;
+				}
+
+				td.label {
+					padding-right: $spacing_unit;
+				}
+			}
+
+			.woocommerce-variation-description p {
+				margin-bottom: $spacing_unit;
+			}
+
+			.reset_variations {
+				font-size: $fontsize_small;
+			}
+
+			.group_table {
+
+				td.woocommerce-grouped-product-list-item__label {
+					padding-right: $spacing_unit;
+					padding-left: $spacing_unit;
+				}
+
+				td {
+					padding-bottom: $spacing_unit;
+				}
+			}
+
+			div.quantity,
+			button {
+				float: inherit;
+				display: inline-block;
+				vertical-align: middle;
+			}
+		}
+	}
+
+	span.onsale {
+		background-color: $color_highlight;
+		color: $color_foreground;
+		font-size: $fontsize_small;
+	}
+}

varia/style-rtl.css

@@ -1034,7 +1034,17 @@ button,
 .button,
 input[type="submit"],
 .wp-block-button__link,
-.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept, .woocommerce #content #respond input#submit,
+.woocommerce #content #respond input#submit.alt,
+.woocommerce #content a.button,
+.woocommerce #content a.button.alt,
+.woocommerce #content button.button,
+.woocommerce #content button.button.alt,
+.woocommerce #content input.button,
+.woocommerce #content input.button.alt,
+.woocommerce #content .cart .button,
+.woocommerce #content .cart input.button,
+.woocommerce #content a.added_to_cart {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -1051,11 +1061,29 @@ button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, .woocommerce #content #respond input#submit:before,
+.woocommerce #content #respond input#submit.alt:before,
+.woocommerce #content a.button:before,
+.woocommerce #content a.button.alt:before,
+.woocommerce #content button.button:before,
+.woocommerce #content button.button.alt:before,
+.woocommerce #content input.button:before,
+.woocommerce #content input.button.alt:before,
+.woocommerce #content .cart .button:before,
+.woocommerce #content a.added_to_cart:before, button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after, .woocommerce #content #respond input#submit:after,
+.woocommerce #content #respond input#submit.alt:after,
+.woocommerce #content a.button:after,
+.woocommerce #content a.button.alt:after,
+.woocommerce #content button.button:after,
+.woocommerce #content button.button.alt:after,
+.woocommerce #content input.button:after,
+.woocommerce #content input.button.alt:after,
+.woocommerce #content .cart .button:after,
+.woocommerce #content a.added_to_cart:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -1066,7 +1094,16 @@ button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, .woocommerce #content #respond input#submit:before,
+.woocommerce #content #respond input#submit.alt:before,
+.woocommerce #content a.button:before,
+.woocommerce #content a.button.alt:before,
+.woocommerce #content button.button:before,
+.woocommerce #content button.button.alt:before,
+.woocommerce #content input.button:before,
+.woocommerce #content input.button.alt:before,
+.woocommerce #content .cart .button:before,
+.woocommerce #content a.added_to_cart:before {
 	margin-bottom: -0.12em;
 }
 
@@ -1074,7 +1111,16 @@ button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after, .woocommerce #content #respond input#submit:after,
+.woocommerce #content #respond input#submit.alt:after,
+.woocommerce #content a.button:after,
+.woocommerce #content a.button.alt:after,
+.woocommerce #content button.button:after,
+.woocommerce #content button.button.alt:after,
+.woocommerce #content input.button:after,
+.woocommerce #content input.button.alt:after,
+.woocommerce #content .cart .button:after,
+.woocommerce #content a.added_to_cart:after {
 	margin-top: -0.11em;
 }
 
@@ -1082,15 +1128,30 @@ button:hover,
 .button:hover,
 input:hover[type="submit"],
 .wp-block-button__link:hover,
-.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, .woocommerce #content #respond input#submit:hover,
+.woocommerce #content a.button:hover,
+.woocommerce #content button.button:hover,
+.woocommerce #content input.button:hover,
+.woocommerce #content .cart .button:hover,
+.woocommerce #content a.added_to_cart:hover, button:focus,
 .button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .woocommerce #content #respond input#submit:focus,
+.woocommerce #content a.button:focus,
+.woocommerce #content button.button:focus,
+.woocommerce #content input.button:focus,
+.woocommerce #content .cart .button:focus,
+.woocommerce #content a.added_to_cart:focus, button.has-focus,
 .has-focus.button,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
-.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept, .woocommerce #content #respond input.has-focus#submit,
+.woocommerce #content a.has-focus.button,
+.woocommerce #content button.has-focus.button,
+.woocommerce #content input.has-focus.button,
+.woocommerce #content .cart .has-focus.button,
+.woocommerce #content a.has-focus.added_to_cart {
 	color: white;
 	background-color: indigo;
 }
@@ -3513,6 +3574,394 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	font-size: 0.83333rem;
 }
 
+/**
+ * Main WooCommerce styles
+ */
+.woocommerce a.remove {
+	font-size: 1.5rem;
+	height: 1rem;
+	width: 1rem;
+	color: red !important;
+}
+
+.woocommerce a.remove:hover {
+	color: #fff !important;
+	background: red;
+}
+
+.woocommerce small.note {
+	color: #767676;
+	font-size: 0.83333rem;
+	margin-top: 16px;
+}
+
+.woocommerce .woocommerce-breadcrumb {
+	margin-bottom: 32px;
+	font-size: 1rem;
+	color: #767676;
+}
+
+.woocommerce .woocommerce-breadcrumb a {
+	color: currentColor;
+}
+
+/**
+ * Button
+ */
+/**
+ * Reviews
+ */
+.woocommerce #content {
+	/**
+	 * Reviews
+	 */
+}
+
+.woocommerce #content #reviews h2 small {
+	color: #767676;
+	font-size: 0.83333rem;
+	margin: inherit;
+}
+
+.woocommerce #content #reviews h2 small a {
+	color: currentColor;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist li {
+	margin-bottom: 16px;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist li .meta {
+	color: #767676;
+	font-size: 0.83333rem;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist li img.avatar {
+	float: right;
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 3px;
+	width: 32px;
+	height: auto;
+	background: red;
+	border-color: #DDDDDD;
+	margin: 0;
+	box-shadow: none;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist li .comment-text {
+	margin: 0 50px 0 0;
+	border: 1px solid #f00000;
+	border-radius: 4px;
+	padding: 1em 1em 0;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist li .comment-text p {
+	margin: 0 0 1em;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist li .comment-text p.meta {
+	font-size: 0.83em;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist ul.children {
+	list-style: none outside;
+	margin: 20px 50px 0 0;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist ul.children .star-rating {
+	display: none;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist #respond {
+	border: 1px solid #f00000;
+	border-radius: 4px;
+	padding: 1em 1em 0;
+	margin: 20px 50px 0 0;
+}
+
+.woocommerce #content #reviews #comments .commentlist > li::before {
+	content: "";
+}
+
+/**
+ * Star ratings
+ */
+.woocommerce #content .star-rating::before {
+	color: red;
+}
+
+.woocommerce #content .star-rating span {
+	color: red;
+}
+
+/**
+ * Tables
+ */
+.woocommerce table.shop_attributes {
+	border-top-color: #FAFAFA;
+	margin-bottom: 32px;
+}
+
+.woocommerce table.shop_attributes th {
+	padding: 8px;
+	border-bottom-color: #FAFAFA;
+	line-height: 1.78;
+}
+
+.woocommerce table.shop_attributes td {
+	font-style: inherit;
+	border-bottom-color: #FAFAFA;
+	line-height: 1.78;
+}
+
+.woocommerce table.shop_attributes td p {
+	margin: 0;
+	padding: 8px 0;
+}
+
+.woocommerce table.shop_attributes tr:nth-child(even) td,
+.woocommerce table.shop_attributes tr:nth-child(even) th {
+	background: rgba(0, 0, 0, 0.025);
+}
+
+.woocommerce-cart #content .woocommerce table.shop_table {
+	border-color: #DDDDDD;
+	border-radius: 9px;
+}
+
+.woocommerce-cart #content .woocommerce table.shop_table th {
+	border-color: #DDDDDD;
+	padding: 8px 16px;
+	line-height: 1.78;
+}
+
+.woocommerce-cart #content .woocommerce table.shop_table td {
+	border-color: #DDDDDD;
+	padding: 8px 16px;
+	line-height: 1.78;
+}
+
+.woocommerce-cart #content .woocommerce table.shop_table tfoot td,
+.woocommerce-cart #content .woocommerce table.shop_table tfoot th,
+.woocommerce-cart #content .woocommerce table.shop_table tbody th {
+	border-top-color: #FAFAFA;
+}
+
+.woocommerce table.my_account_orders {
+	font-size: 0.83333rem;
+}
+
+.woocommerce table.my_account_orders th,
+.woocommerce table.my_account_orders td {
+	padding: 4px 8px;
+}
+
+.woocommerce td.product-name dl.variation dt,
+.woocommerce td.product-name dl.variation .wc-item-meta-label,
+.woocommerce td.product-name .wc-item-meta dt,
+.woocommerce td.product-name .wc-item-meta .wc-item-meta-label {
+	margin-left: 8px;
+}
+
+.woocommerce td.product-name p.backorder_notification {
+	font-size: 0.83333rem;
+}
+
+.woocommerce td.product-quantity {
+	min-width: 80px;
+}
+
+/**
+ * Structure
+ */
+.woocommerce #content div.summary > *:not(:first-child),
+.woocommerce #content div.product .woocommerce-tabs .panel > *:not(:first-child),
+.woocommerce #content .products.related > *:not(:first-child) {
+	margin-top: 32px;
+}
+
+.woocommerce #content div.summary > *:not(:last-child),
+.woocommerce #content div.product .woocommerce-tabs .panel > *:not(:last-child),
+.woocommerce #content .products.related > *:not(:last-child) {
+	margin-bottom: 32px;
+}
+
+/**
+ * Product Page
+ */
+.woocommerce #content div.product span.price,
+.woocommerce #content div.product p.price {
+	color: blue;
+	font-size: 1.728rem;
+}
+
+.woocommerce #content div.product p.stock {
+	font-size: 1rem;
+}
+
+.woocommerce #content div.product .stock {
+	color: blue;
+}
+
+.woocommerce #content div.product .out-of-stock {
+	color: red;
+}
+
+.woocommerce #content div.product .woocommerce-product-rating {
+	margin-bottom: 32px;
+}
+
+.woocommerce #content div.product div.images {
+	margin-bottom: 32px;
+}
+
+.woocommerce #content div.product div.images div.thumbnails {
+	padding-top: 16px;
+}
+
+.woocommerce #content div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {
+	background-color: white;
+}
+
+.woocommerce #content div.product div.images .woocommerce-product-gallery__image--placeholder {
+	border-color: #FAFAFA;
+}
+
+.woocommerce #content div.product div.images .woocommerce-product-gallery__trigger {
+	font-size: 1.2rem;
+	background: white;
+}
+
+.woocommerce #content div.product div.images .woocommerce-product-gallery__trigger::before {
+	border-color: #AAAAAA;
+}
+
+.woocommerce #content div.product div.images .woocommerce-product-gallery__trigger::after {
+	background-color: #AAAAAA;
+}
+
+.woocommerce #content div.product div.summary {
+	margin-bottom: 32px;
+}
+
+.woocommerce #content div.product div.social {
+	margin-bottom: 32px;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs {
+	padding-right: 16px;
+	margin-bottom: 32px;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li {
+	border-color: #DDDDDD;
+	background-color: red;
+	border-radius: 9px 9px 0 0;
+	padding-right: 16px;
+	padding-left: 16px;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li a {
+	padding-top: 8px;
+	padding-bottom: 8px;
+	color: red;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li a:hover {
+	color: #ff3333;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li.active {
+	background-color: white;
+	border-bottom-color: white;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li.active a {
+	color: inherit;
+	text-shadow: inherit;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li.active::before {
+	box-shadow: -2px 2px 0 white;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li.active::after {
+	box-shadow: 2px 2px 0 white;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li::before, .woocommerce #content div.product .woocommerce-tabs ul.tabs li::after {
+	border-color: #DDDDDD;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li::before {
+	box-shadow: -2px 2px 0 red;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li::after {
+	box-shadow: 2px 2px 0 red;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs::before {
+	border-bottom-color: #DDDDDD;
+}
+
+.woocommerce #content div.product .woocommerce-tabs .panel {
+	margin-bottom: 32px;
+}
+
+.woocommerce #content div.product p.cart {
+	margin-bottom: 32px;
+}
+
+.woocommerce #content div.product form.cart .variations {
+	margin-bottom: 16px;
+}
+
+.woocommerce #content div.product form.cart .variations td,
+.woocommerce #content div.product form.cart .variations th {
+	line-height: 1.78;
+}
+
+.woocommerce #content div.product form.cart .variations select {
+	margin-left: 16px;
+}
+
+.woocommerce #content div.product form.cart .variations td.label {
+	padding-left: 16px;
+}
+
+.woocommerce #content div.product form.cart .woocommerce-variation-description p {
+	margin-bottom: 16px;
+}
+
+.woocommerce #content div.product form.cart .reset_variations {
+	font-size: 0.83333rem;
+}
+
+.woocommerce #content div.product form.cart .group_table td.woocommerce-grouped-product-list-item__label {
+	padding-left: 16px;
+	padding-right: 16px;
+}
+
+.woocommerce #content div.product form.cart .group_table td {
+	padding-bottom: 16px;
+}
+
+.woocommerce #content div.product form.cart div.quantity,
+.woocommerce #content div.product form.cart button {
+	float: inherit;
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.woocommerce #content span.onsale {
+	background-color: lightblue;
+	color: #444444;
+	font-size: 0.83333rem;
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

varia/style.css

@@ -1034,7 +1034,17 @@ button,
 .button,
 input[type="submit"],
 .wp-block-button__link,
-.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept, .woocommerce #content #respond input#submit,
+.woocommerce #content #respond input#submit.alt,
+.woocommerce #content a.button,
+.woocommerce #content a.button.alt,
+.woocommerce #content button.button,
+.woocommerce #content button.button.alt,
+.woocommerce #content input.button,
+.woocommerce #content input.button.alt,
+.woocommerce #content .cart .button,
+.woocommerce #content .cart input.button,
+.woocommerce #content a.added_to_cart {
 	line-height: 1;
 	color: white;
 	cursor: pointer;
@@ -1051,11 +1061,29 @@ button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, .woocommerce #content #respond input#submit:before,
+.woocommerce #content #respond input#submit.alt:before,
+.woocommerce #content a.button:before,
+.woocommerce #content a.button.alt:before,
+.woocommerce #content button.button:before,
+.woocommerce #content button.button.alt:before,
+.woocommerce #content input.button:before,
+.woocommerce #content input.button.alt:before,
+.woocommerce #content .cart .button:before,
+.woocommerce #content a.added_to_cart:before, button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after, .woocommerce #content #respond input#submit:after,
+.woocommerce #content #respond input#submit.alt:after,
+.woocommerce #content a.button:after,
+.woocommerce #content a.button.alt:after,
+.woocommerce #content button.button:after,
+.woocommerce #content button.button.alt:after,
+.woocommerce #content input.button:after,
+.woocommerce #content input.button.alt:after,
+.woocommerce #content .cart .button:after,
+.woocommerce #content a.added_to_cart:after {
 	content: '';
 	display: block;
 	height: 0;
@@ -1066,7 +1094,16 @@ button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, .woocommerce #content #respond input#submit:before,
+.woocommerce #content #respond input#submit.alt:before,
+.woocommerce #content a.button:before,
+.woocommerce #content a.button.alt:before,
+.woocommerce #content button.button:before,
+.woocommerce #content button.button.alt:before,
+.woocommerce #content input.button:before,
+.woocommerce #content input.button.alt:before,
+.woocommerce #content .cart .button:before,
+.woocommerce #content a.added_to_cart:before {
 	margin-bottom: -0.12em;
 }
 
@@ -1074,7 +1111,16 @@ button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
-.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after, .woocommerce #content #respond input#submit:after,
+.woocommerce #content #respond input#submit.alt:after,
+.woocommerce #content a.button:after,
+.woocommerce #content a.button.alt:after,
+.woocommerce #content button.button:after,
+.woocommerce #content button.button.alt:after,
+.woocommerce #content input.button:after,
+.woocommerce #content input.button.alt:after,
+.woocommerce #content .cart .button:after,
+.woocommerce #content a.added_to_cart:after {
 	margin-top: -0.11em;
 }
 
@@ -1082,15 +1128,30 @@ button:hover,
 .button:hover,
 input:hover[type="submit"],
 .wp-block-button__link:hover,
-.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, .woocommerce #content #respond input#submit:hover,
+.woocommerce #content a.button:hover,
+.woocommerce #content button.button:hover,
+.woocommerce #content input.button:hover,
+.woocommerce #content .cart .button:hover,
+.woocommerce #content a.added_to_cart:hover, button:focus,
 .button:focus,
 input:focus[type="submit"],
 .wp-block-button__link:focus,
-.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, .woocommerce #content #respond input#submit:focus,
+.woocommerce #content a.button:focus,
+.woocommerce #content button.button:focus,
+.woocommerce #content input.button:focus,
+.woocommerce #content .cart .button:focus,
+.woocommerce #content a.added_to_cart:focus, button.has-focus,
 .has-focus.button,
 input.has-focus[type="submit"],
 .has-focus.wp-block-button__link,
-.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept, .woocommerce #content #respond input.has-focus#submit,
+.woocommerce #content a.has-focus.button,
+.woocommerce #content button.has-focus.button,
+.woocommerce #content input.has-focus.button,
+.woocommerce #content .cart .has-focus.button,
+.woocommerce #content a.has-focus.added_to_cart {
 	color: white;
 	background-color: indigo;
 }
@@ -3542,6 +3603,394 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	font-size: 0.83333rem;
 }
 
+/**
+ * Main WooCommerce styles
+ */
+.woocommerce a.remove {
+	font-size: 1.5rem;
+	height: 1rem;
+	width: 1rem;
+	color: red !important;
+}
+
+.woocommerce a.remove:hover {
+	color: #fff !important;
+	background: red;
+}
+
+.woocommerce small.note {
+	color: #767676;
+	font-size: 0.83333rem;
+	margin-top: 16px;
+}
+
+.woocommerce .woocommerce-breadcrumb {
+	margin-bottom: 32px;
+	font-size: 1rem;
+	color: #767676;
+}
+
+.woocommerce .woocommerce-breadcrumb a {
+	color: currentColor;
+}
+
+/**
+ * Button
+ */
+/**
+ * Reviews
+ */
+.woocommerce #content {
+	/**
+	 * Reviews
+	 */
+}
+
+.woocommerce #content #reviews h2 small {
+	color: #767676;
+	font-size: 0.83333rem;
+	margin: inherit;
+}
+
+.woocommerce #content #reviews h2 small a {
+	color: currentColor;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist li {
+	margin-bottom: 16px;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist li .meta {
+	color: #767676;
+	font-size: 0.83333rem;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist li img.avatar {
+	float: left;
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: 3px;
+	width: 32px;
+	height: auto;
+	background: red;
+	border-color: #DDDDDD;
+	margin: 0;
+	box-shadow: none;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist li .comment-text {
+	margin: 0 0 0 50px;
+	border: 1px solid #f00000;
+	border-radius: 4px;
+	padding: 1em 1em 0;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist li .comment-text p {
+	margin: 0 0 1em;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist li .comment-text p.meta {
+	font-size: 0.83em;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist ul.children {
+	list-style: none outside;
+	margin: 20px 0 0 50px;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist ul.children .star-rating {
+	display: none;
+}
+
+.woocommerce #content #reviews #comments ol.commentlist #respond {
+	border: 1px solid #f00000;
+	border-radius: 4px;
+	padding: 1em 1em 0;
+	margin: 20px 0 0 50px;
+}
+
+.woocommerce #content #reviews #comments .commentlist > li::before {
+	content: "";
+}
+
+/**
+ * Star ratings
+ */
+.woocommerce #content .star-rating::before {
+	color: red;
+}
+
+.woocommerce #content .star-rating span {
+	color: red;
+}
+
+/**
+ * Tables
+ */
+.woocommerce table.shop_attributes {
+	border-top-color: #FAFAFA;
+	margin-bottom: 32px;
+}
+
+.woocommerce table.shop_attributes th {
+	padding: 8px;
+	border-bottom-color: #FAFAFA;
+	line-height: 1.78;
+}
+
+.woocommerce table.shop_attributes td {
+	font-style: inherit;
+	border-bottom-color: #FAFAFA;
+	line-height: 1.78;
+}
+
+.woocommerce table.shop_attributes td p {
+	margin: 0;
+	padding: 8px 0;
+}
+
+.woocommerce table.shop_attributes tr:nth-child(even) td,
+.woocommerce table.shop_attributes tr:nth-child(even) th {
+	background: rgba(0, 0, 0, 0.025);
+}
+
+.woocommerce-cart #content .woocommerce table.shop_table {
+	border-color: transparent;
+	border-radius: 0;
+}
+
+.woocommerce-cart #content .woocommerce table.shop_table th {
+	border-color: #DDDDDD;
+	padding: 8px 16px;
+	line-height: 1.78;
+}
+
+.woocommerce-cart #content .woocommerce table.shop_table td {
+	border-color: #DDDDDD;
+	padding: 8px 16px;
+	line-height: 1.78;
+}
+
+.woocommerce-cart #content .woocommerce table.shop_table tfoot td,
+.woocommerce-cart #content .woocommerce table.shop_table tfoot th,
+.woocommerce-cart #content .woocommerce table.shop_table tbody th {
+	border-top-color: #FAFAFA;
+}
+
+.woocommerce table.my_account_orders {
+	font-size: 0.83333rem;
+}
+
+.woocommerce table.my_account_orders th,
+.woocommerce table.my_account_orders td {
+	padding: 4px 8px;
+}
+
+.woocommerce td.product-name dl.variation dt,
+.woocommerce td.product-name dl.variation .wc-item-meta-label,
+.woocommerce td.product-name .wc-item-meta dt,
+.woocommerce td.product-name .wc-item-meta .wc-item-meta-label {
+	margin-right: 8px;
+}
+
+.woocommerce td.product-name p.backorder_notification {
+	font-size: 0.83333rem;
+}
+
+.woocommerce td.product-quantity {
+	min-width: 80px;
+}
+
+/**
+ * Structure
+ */
+.woocommerce #content div.summary > *:not(:first-child),
+.woocommerce #content div.product .woocommerce-tabs .panel > *:not(:first-child),
+.woocommerce #content .products.related > *:not(:first-child) {
+	margin-top: 32px;
+}
+
+.woocommerce #content div.summary > *:not(:last-child),
+.woocommerce #content div.product .woocommerce-tabs .panel > *:not(:last-child),
+.woocommerce #content .products.related > *:not(:last-child) {
+	margin-bottom: 32px;
+}
+
+/**
+ * Product Page
+ */
+.woocommerce #content div.product span.price,
+.woocommerce #content div.product p.price {
+	color: blue;
+	font-size: 1.728rem;
+}
+
+.woocommerce #content div.product p.stock {
+	font-size: 1rem;
+}
+
+.woocommerce #content div.product .stock {
+	color: blue;
+}
+
+.woocommerce #content div.product .out-of-stock {
+	color: red;
+}
+
+.woocommerce #content div.product .woocommerce-product-rating {
+	margin-bottom: 32px;
+}
+
+.woocommerce #content div.product div.images {
+	margin-bottom: 32px;
+}
+
+.woocommerce #content div.product div.images div.thumbnails {
+	padding-top: 16px;
+}
+
+.woocommerce #content div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {
+	background-color: white;
+}
+
+.woocommerce #content div.product div.images .woocommerce-product-gallery__image--placeholder {
+	border-color: #FAFAFA;
+}
+
+.woocommerce #content div.product div.images .woocommerce-product-gallery__trigger {
+	font-size: 1.2rem;
+	background: white;
+}
+
+.woocommerce #content div.product div.images .woocommerce-product-gallery__trigger::before {
+	border-color: #AAAAAA;
+}
+
+.woocommerce #content div.product div.images .woocommerce-product-gallery__trigger::after {
+	background-color: #AAAAAA;
+}
+
+.woocommerce #content div.product div.summary {
+	margin-bottom: 32px;
+}
+
+.woocommerce #content div.product div.social {
+	margin-bottom: 32px;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs {
+	padding-left: 16px;
+	margin-bottom: 32px;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li {
+	border-color: #DDDDDD;
+	background-color: red;
+	border-radius: 9px 9px 0 0;
+	padding-left: 16px;
+	padding-right: 16px;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li a {
+	padding-top: 8px;
+	padding-bottom: 8px;
+	color: red;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li a:hover {
+	color: #ff3333;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li.active {
+	background-color: white;
+	border-bottom-color: white;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li.active a {
+	color: inherit;
+	text-shadow: inherit;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li.active::before {
+	box-shadow: 2px 2px 0 white;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li.active::after {
+	box-shadow: -2px 2px 0 white;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li::before, .woocommerce #content div.product .woocommerce-tabs ul.tabs li::after {
+	border-color: #DDDDDD;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li::before {
+	box-shadow: 2px 2px 0 red;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs li::after {
+	box-shadow: -2px 2px 0 red;
+}
+
+.woocommerce #content div.product .woocommerce-tabs ul.tabs::before {
+	border-bottom-color: #DDDDDD;
+}
+
+.woocommerce #content div.product .woocommerce-tabs .panel {
+	margin-bottom: 32px;
+}
+
+.woocommerce #content div.product p.cart {
+	margin-bottom: 32px;
+}
+
+.woocommerce #content div.product form.cart .variations {
+	margin-bottom: 16px;
+}
+
+.woocommerce #content div.product form.cart .variations td,
+.woocommerce #content div.product form.cart .variations th {
+	line-height: 1.78;
+}
+
+.woocommerce #content div.product form.cart .variations select {
+	margin-right: 16px;
+}
+
+.woocommerce #content div.product form.cart .variations td.label {
+	padding-right: 16px;
+}
+
+.woocommerce #content div.product form.cart .woocommerce-variation-description p {
+	margin-bottom: 16px;
+}
+
+.woocommerce #content div.product form.cart .reset_variations {
+	font-size: 0.83333rem;
+}
+
+.woocommerce #content div.product form.cart .group_table td.woocommerce-grouped-product-list-item__label {
+	padding-right: 16px;
+	padding-left: 16px;
+}
+
+.woocommerce #content div.product form.cart .group_table td {
+	padding-bottom: 16px;
+}
+
+.woocommerce #content div.product form.cart div.quantity,
+.woocommerce #content div.product form.cart button {
+	float: inherit;
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.woocommerce #content span.onsale {
+	background-color: lightblue;
+	color: #444444;
+	font-size: 0.83333rem;
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides