Varia: Refactorinhg markup to better support latest WC updates and move reviews to a product tab

varia/inc/woocommerce.php

@@ -32,6 +32,24 @@ function varia_woocommerce_setup() {
 }
 add_action( 'after_setup_theme', 'varia_woocommerce_setup' );
 
+/**
+ * Add a custom wrapper for woocomerce content
+ */
+function varia_wrapper_start() {
+  echo '<article id="woocommerce-wrapper" class="responsive-max-width">';
+}
+add_action('woocommerce_before_main_content', 'varia_wrapper_start', 10);
+
+function varia_wrapper_end() {
+  echo '</article>';
+}
+add_action('woocommerce_after_main_content', 'varia_wrapper_end', 10);
+
+/**
+ * Remove WooCommerce Sidebar
+ */
+remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
+
 /**
  * Enqueue scripts and styles.
  */

varia/sass/vendors/_woocommerce.scss

@@ -38,58 +38,17 @@ $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: $fontsize_large;
-		height: $fontsize_large;
-		width: $fontsize_large;
-		color: red !important; // Required for default theme compatibility
-
-		&:hover {
-			color: $color_background !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;
-		}
-	}
-
-}
+// Elements
+@import "woocommerce/elements/imports";
 
 // Blocks
-@import "woocommerce/blocks/button/style";
+@import "woocommerce/blocks/imports";
 
 // Components
-@import "woocommerce/components/cart-sidebar";
-@import "woocommerce/components/cart-collaterals";
-@import "woocommerce/components/notices";
-@import "woocommerce/components/onsale";
-@import "woocommerce/components/password-strength-meter";
-@import "woocommerce/components/product-loops";
-@import "woocommerce/components/reviews";
-@import "woocommerce/components/star-rating";
-@import "woocommerce/components/tables";
+@import "woocommerce/components/imports";
 
 // Layout
 @import "woocommerce/layout/structure";
 
 // Pages
-@import "woocommerce/pages/account";
-@import "woocommerce/pages/cart";
-@import "woocommerce/pages/product-page";
-@import "woocommerce/pages/single-product";
+@import "woocommerce/pages/imports";

varia/sass/vendors/woocommerce/blocks/_imports.scss

@@ -0,0 +1,5 @@
+/**
+ * Block Imports
+ */
+
+@import "button/style";

varia/sass/vendors/woocommerce/components/_cart-collaterals.scss

@@ -2,18 +2,22 @@
  * Cart Collaterals
  */
 
-.woocommerce-cart,
-.woocommerce-checkout,
-#add_payment_method {
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
-	.cart-collaterals {
+	.cart-collaterals,
+	#add_payment_method .cart-collaterals {
 
-		.shipping-calculator-button {
-			margin-top: #{0.5 * $spacing_vertical};
-		}
+		.cart_totals,
+		.cross-sells {
 
-		.shipping-calculator-form {
-			margin-top: $spacing_horizontal;
+			tr td,
+			tr th {
+				border-top-color: $color_border_default;
+			}
+
+			& > h2 {
+				font-size: $fontsize_large;
+			}
 		}
 
 		.cart_totals {
@@ -39,20 +43,15 @@
 			.discount td {
 				color: $color_highlight;
 			}
+		}
 
-			tr td,
-			tr th {
-				border-top-color: $color_border_default;
-			}
+		.shipping-calculator-button {
+			margin-top: #{0.5 * $spacing_vertical};
+		}
+
+		.shipping-calculator-form {
+			margin-top: $spacing_horizontal;
 		}
 	}
 }
 
-.woocommerce .cart-collaterals .cross-sells,
-.woocommerce-page .cart-collaterals .cross-sells,
-.woocommerce .cart-collaterals .cart_totals,
-.woocommerce-page .cart-collaterals .cart_totals {
-	& > h2 {
-		font-size: $fontsize_large;
-	}
-}

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

@@ -0,0 +1,8 @@
+/**
+ * Components Imports
+ */
+
+@import "cart-sidebar";
+@import "cart-collaterals";
+@import "product-loops";
+@import "reviews";

varia/sass/vendors/woocommerce/components/_password-strength-meter.scss

@@ -1,33 +0,0 @@
-/**
- * Password strength meter
- */
-.woocommerce-password-strength {
-	text-align: center;
-	font-weight: 600;
-	padding: #{0.5 * $spacing_base};
-	font-size: $fontsize_small;
-
-	&.strong {
-		background-color: $color_success;
-		border-color: none;
-	}
-
-	&.good {
-		background-color: $color_warning;
-		border-color: none;
-	}
-
-	&.short {
-		background-color: $color_error;
-		border-color: none;
-	}
-
-	&.bad {
-		background-color: $color_error;
-		border-color: none;
-	}
-}
-
-woocommerce-password-hint {
-	font-size: $fontsize_xs;
-}

varia/sass/vendors/woocommerce/components/_product-loops.scss

@@ -2,7 +2,7 @@
  * Product loops
  */
 
-#content .woocommerce {
+#woocommerce-wrapper {
 
 	.products ul,
 	ul.products {

varia/sass/vendors/woocommerce/elements/_breadcrumbs.scss

@@ -0,0 +1,18 @@
+/**
+ * Small Note
+ */
+
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
+
+	.woocommerce-breadcrumb {
+
+		margin-bottom: $spacing_vertical;
+		font-size: $fontsize_base;
+		font-family: $font_family_primary;
+		color: $color_subtext;
+
+		a {
+			color: currentColor;
+		}
+	}
+}

varia/sass/vendors/woocommerce/elements/_imports.scss

@@ -0,0 +1,12 @@
+/**
+ * Element Imports
+ */
+
+@import "breadcrumbs";
+@import "notices";
+@import "onsale";
+@import "password-strength-meter";
+@import "remove-icon";
+@import "small-note";
+@import "star-rating";
+@import "tables";

varia/sass/vendors/woocommerce/components/_notices.scss → varia/sass/vendors/woocommerce/elements/_notices.scss

@@ -2,7 +2,8 @@
  * Notices
  */
 
-.woocommerce {
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
+
 	.woocommerce-message,
 	.woocommerce-error,
 	.woocommerce-info {

varia/sass/vendors/woocommerce/components/_onsale.scss → varia/sass/vendors/woocommerce/elements/_onsale.scss

@@ -2,7 +2,7 @@
  * Star ratings
  */
 
-.woocommerce #content { // adding #content here to override default wc styles without !important
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
 	span.onsale {
 		border-radius: 100%;

varia/sass/vendors/woocommerce/elements/_password-strength-meter.scss

@@ -0,0 +1,36 @@
+/**
+ * Password strength meter
+ */
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
+
+	.woocommerce-password-strength {
+		text-align: center;
+		font-weight: 600;
+		padding: #{0.5 * $spacing_base};
+		font-size: $fontsize_small;
+
+		&.strong {
+			background-color: $color_success;
+			border-color: none;
+		}
+
+		&.good {
+			background-color: $color_warning;
+			border-color: none;
+		}
+
+		&.short {
+			background-color: $color_error;
+			border-color: none;
+		}
+
+		&.bad {
+			background-color: $color_error;
+			border-color: none;
+		}
+	}
+
+	.woocommerce-password-hint {
+		font-size: $fontsize_xs;
+	}
+}

varia/sass/vendors/woocommerce/elements/_remove-icon.scss

@@ -0,0 +1,19 @@
+/**
+ * Remove Icon
+ */
+
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
+
+	a.remove {
+		font-size: $fontsize_large;
+		height: $fontsize_large;
+		width: $fontsize_large;
+		color: red !important; // Required for default theme compatibility
+
+		&:hover {
+			color: $color_background !important; // Required for default theme compatibility
+			background: red;
+		}
+	}
+}
+

varia/sass/vendors/woocommerce/elements/_small-note.scss

@@ -0,0 +1,12 @@
+/**
+ * Small Note
+ */
+
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
+
+	small.note {
+		color: $color_subtext;
+		font-size: $fontsize_small;
+		margin-top: $spacing_unit;
+	}
+}

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

@@ -2,7 +2,7 @@
  * Star ratings
  */
 
-.woocommerce #content { // adding #content here to override default wc styles without !important
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
 	.star-rating {
 

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

@@ -2,7 +2,7 @@
  * Tables
  */
 
-.woocommerce {
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
 	table.shop_table {
 

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

@@ -36,14 +36,12 @@
 /**
  * Vertical Space - 16px
  */
-#content .woocommerce ul.products li.product a,
-#content .woocommerce ul.products li.product-category a,
-.woocommerce .cart-collaterals .cross-sells,
-.woocommerce-page .cart-collaterals .cross-sells,
-.woocommerce .cart-collaterals .cart_totals,
-.woocommerce-page .cart-collaterals .cart_totals,
-.woocommerce .widget_shopping_cart,
-.woocommerce .widget_shopping_cart_content {
+#woocommerce-wrapper ul.products li.product a,
+#woocommerce-wrapper ul.products li.product-category a,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals,
+body[class*="woocommerce"] #page .widget_shopping_cart,
+body[class*="woocommerce"] #page .widget_shopping_cart_content {
 
 	& > *:not(:first-child) {
 		margin-top: $spacing_unit;

varia/sass/vendors/woocommerce/pages/_account.scss

@@ -1,7 +1,7 @@
 /**
  * Account page
  */
-.woocommerce-account #content { // adding #content here to override default wc styles without !important
+.woocommerce-account #page { // adding #page here to override default wc styles without !important
 
 	.woocommerce-MyAccount-content {
 		.woocommerce-notices-wrapper:empty {

varia/sass/vendors/woocommerce/pages/_cart.scss

@@ -1,230 +1,211 @@
-/**
- * Cart
- */
 /**
  * Cart/checkout page
  */
-.woocommerce-cart,
-.woocommerce-checkout,
-#add_payment_method {
-
-	table.cart {
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
-		.product-thumbnail {
-			min-width: $spacing_horizontal;
-		}
+	table.shop_table {
+		border-color: $color_border_default;
+		border-radius: 3px;
 
-		img {
-			width: #{2 * $spacing_vertical};
+		th {
+			padding: $spacing_base $spacing_unit;
+			line-height: $font_line_height;
 		}
 
-		td.actions .coupon .input-text {
-			border-color: $color_border_default;
-			padding: $spacing_base;
-			margin: 0 $spacing_base 0 0;
+		td {
+			padding: $spacing_base $spacing_unit;
+			line-height: $font_line_height;
 		}
-	}
 
-	.wc-proceed-to-checkout {
-
-		padding: $spacing_vertical 0;
-
-		a.checkout-button {
-			margin-bottom: $spacing_vertical;
-			font-size: $fontsize_medium;
-			padding: $spacing_unit;
+		tfoot td,
+		tfoot th,
+		tbody th {
+			border-top-color: $color_border_default;
 		}
 	}
 
-	.checkout {
+	table.my_account_orders {
+		font-size: $fontsize_small;
 
-		.create-account small {
-			font-size: $fontsize_xs;
-			color: $color_subtext;
+		th,
+		td {
+			padding: (0.5 * $spacing_base) $spacing_base;
 		}
 	}
 
-	#payment {
-		background: $color_background_light;
-		border-radius: 3px;
-
-		ul.payment_methods {
-
-			padding: $spacing_base;
-			border-bottom-color: $color_border_default;
+	td.product-name {
 
-			li {
-				line-height: $font_line_height;
+		dl.variation,
+		.wc-item-meta {
 
-				input {
-					margin-right: $font_line_height;
-				}
+			dt,
+			.wc-item-meta-label {
+				margin-right: $spacing_base;
 			}
 		}
 
-		div.form-row {
-			padding: $spacing_base;
+		p.backorder_notification {
+			font-size: $fontsize_small;
 		}
+	}
 
-		div.payment_box {
-			padding: $spacing_base;
-			margin-bottom: $spacing_base;
-			margin-top: $spacing_base;
-			font-size: $fontsize_small;
-			border-radius: 3px;
-			line-height: $font_line_height;
-			background-color: $color_border_default;
-			color: $color_foreground;
+	td.product-quantity {
+		min-width: #{5 * $spacing_unit};
+	}
 
-			input.input-text,
-			textarea {
-				border-color: $color_border_default;
-				border-top-color: $color_border_default;
-			}
+	table.cart td.actions .input-text {
+		width: inherit;
+		float: inherit;
+		padding: $spacing_unit;
+	}
+
+	#add_payment_method {
 
-			::-webkit-input-placeholder {
-				color: $color_foreground_light;
+		table.cart {
+
+			.product-thumbnail {
+				min-width: $spacing_horizontal;
 			}
 
-			:-moz-placeholder {
-				color: $color_foreground_light;
+			img {
+				width: #{2 * $spacing_vertical};
 			}
 
-			:-ms-input-placeholder {
-				color: $color_foreground_light;
+			td.actions .coupon .input-text {
+				border-color: $color_border_default;
+				padding: $spacing_base;
+				margin: 0 $spacing_base 0 0;
 			}
+		}
 
-			.woocommerce-SavedPaymentMethods {
+		.wc-proceed-to-checkout {
 
-				.woocommerce-SavedPaymentMethods-tokenInput {
-					margin-right: $spacing_unit;
-				}
-			}
+			padding: $spacing_vertical 0;
 
-			.wc-credit-card-form {
-				margin-top: $spacing_unit;
+			a.checkout-button {
+				margin-bottom: $spacing_vertical;
+				font-size: $fontsize_medium;
+				padding: $spacing_unit;
 			}
+		}
 
-			.wc-credit-card-form-card-number,
-			.wc-credit-card-form-card-expiry,
-			.wc-credit-card-form-card-cvc {
-				font-size: $fontsize_large;
-				padding: $spacing_base;
-			}
+		.checkout {
 
-			span.help {
-				font-size: $fontsize_small;
+			.create-account small {
+				font-size: $fontsize_xs;
 				color: $color_subtext;
 			}
+		}
 
-			.form-row {
-				margin: 0 0 $spacing_vertical;
-			}
+		#payment {
+			background: $color_background_light;
+			border-radius: 3px;
 
-			p:last-child {
-				margin-bottom: 0;
-			}
+			ul.payment_methods {
 
-			&::before {
-				border-bottom-color: $color_border_default; /* arrow size / color */
-			}
-		}
+				padding: $spacing_base;
+				border-bottom-color: $color_border_default;
 
-		.payment_method_paypal {
+				li {
+					line-height: $font_line_height;
 
-			.about_paypal {
-				float: right;
-				line-height: 52px;
-				font-size: $fontsize_small;
+					input {
+						margin-right: $font_line_height;
+					}
+				}
 			}
 
-			img {
-				max-height: 52px;
-				vertical-align: middle;
+			div.form-row {
+				padding: $spacing_base;
 			}
-		}
-	}
-}
 
-.woocommerce-terms-and-conditions {
-	border-color: $color_border_default;
-}
+			div.payment_box {
+				padding: $spacing_base;
+				margin-bottom: $spacing_base;
+				margin-top: $spacing_base;
+				font-size: $fontsize_small;
+				border-radius: 3px;
+				line-height: $font_line_height;
+				background-color: $color_border_default;
+				color: $color_foreground;
 
-.woocommerce-invalid {
+				input.input-text,
+				textarea {
+					border-color: $color_border_default;
+					border-top-color: $color_border_default;
+				}
 
-	#terms {
-		outline-color: $color_error;
-	}
-}
+				::-webkit-input-placeholder {
+					color: $color_foreground_light;
+				}
 
-.woocommerce-cart #content { // adding #content here to override default wc styles without !important
+				:-moz-placeholder {
+					color: $color_foreground_light;
+				}
 
-	table.shop_table {
-		border-color: $color_border_default;
-		border-radius: 3px;
+				:-ms-input-placeholder {
+					color: $color_foreground_light;
+				}
 
-		th {
-			padding: $spacing_base $spacing_unit;
-			line-height: $font_line_height;
-		}
+				.woocommerce-SavedPaymentMethods {
 
-		td {
-			padding: $spacing_base $spacing_unit;
-			line-height: $font_line_height;
-		}
+					.woocommerce-SavedPaymentMethods-tokenInput {
+						margin-right: $spacing_unit;
+					}
+				}
 
-		tfoot td,
-		tfoot th,
-		tbody th {
-			border-top-color: $color_border_default;
-		}
-	}
+				.wc-credit-card-form {
+					margin-top: $spacing_unit;
+				}
 
-	table.my_account_orders {
-		font-size: $fontsize_small;
+				.wc-credit-card-form-card-number,
+				.wc-credit-card-form-card-expiry,
+				.wc-credit-card-form-card-cvc {
+					font-size: $fontsize_large;
+					padding: $spacing_base;
+				}
 
-		th,
-		td {
-			padding: (0.5 * $spacing_base) $spacing_base;
-		}
-	}
+				span.help {
+					font-size: $fontsize_small;
+					color: $color_subtext;
+				}
 
-	td.product-name {
+				.form-row {
+					margin: 0 0 $spacing_vertical;
+				}
 
-		dl.variation,
-		.wc-item-meta {
+				p:last-child {
+					margin-bottom: 0;
+				}
 
-			dt,
-			.wc-item-meta-label {
-				margin-right: $spacing_base;
+				&::before {
+					border-bottom-color: $color_border_default; /* arrow size / color */
+				}
 			}
-		}
 
-		p.backorder_notification {
-			font-size: $fontsize_small;
+			.payment_method_paypal {
+
+				.about_paypal {
+					float: right;
+					line-height: 52px;
+					font-size: $fontsize_small;
+				}
+
+				img {
+					max-height: 52px;
+					vertical-align: middle;
+				}
+			}
 		}
 	}
 
-	td.product-quantity {
-		min-width: 80px;
+	.woocommerce-terms-and-conditions {
+		border-color: $color_border_default;
 	}
-}
 
-.woocommerce-page #content { // adding #content here to override default wc styles without !important
-	table.cart td.actions .input-text,
-	.woocommerce table.cart td.actions .input-text,
-	table.cart td.actions .input-text {
-		width: inherit;
-		float: inherit;
-		padding: $spacing_unit;
+	.woocommerce-invalid {
+		#terms {
+			outline-color: $color_error;
+		}
 	}
 }
-
-#add_payment_method .cart-collaterals .cart_totals tr td,
-#add_payment_method .cart-collaterals .cart_totals tr th,
-.woocommerce-cart .cart-collaterals .cart_totals tr td,
-.woocommerce-cart .cart-collaterals .cart_totals tr th,
-.woocommerce-checkout .cart-collaterals .cart_totals tr td,
-.woocommerce-checkout .cart-collaterals .cart_totals tr th {
-	border-top-color: $color_border_default;
-}

varia/sass/vendors/woocommerce/pages/_imports.scss

@@ -0,0 +1,8 @@
+/**
+ * Page Imports
+ */
+
+@import "account";
+@import "cart";
+@import "product-page";
+@import "single-product";

varia/style-woocommerce.css

@@ -255,34 +255,207 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a.ha
 /**
  * Main WooCommerce styles
  */
-.woocommerce a.remove {
+/**
+ * Element Imports
+ */
+/**
+ * Small Note
+ */
+body[class*="woocommerce"] #page .woocommerce-breadcrumb {
+	margin-bottom: 32px;
+	font-size: 1rem;
+	font-family: sans-serif;
+	color: #767676;
+}
+
+body[class*="woocommerce"] #page .woocommerce-breadcrumb a {
+	color: currentColor;
+}
+
+/**
+ * Notices
+ */
+body[class*="woocommerce"] #page .woocommerce-message,
+body[class*="woocommerce"] #page .woocommerce-error,
+body[class*="woocommerce"] #page .woocommerce-info {
+	padding: 16px 32px 16px 64px;
+	margin-bottom: 32px;
+	background-color: #FAFAFA;
+	color: #111111;
+	border-top-color: blue;
+}
+
+body[class*="woocommerce"] #page .woocommerce-message {
+	border-top-color: yellowgreen;
+}
+
+body[class*="woocommerce"] #page .woocommerce-message:before {
+	color: yellowgreen;
+}
+
+body[class*="woocommerce"] #page .woocommerce-error {
+	border-top-color: salmon;
+}
+
+body[class*="woocommerce"] #page .woocommerce-error:before {
+	color: salmon;
+}
+
+body[class*="woocommerce"] #page .woocommerce-info {
+	border-top-color: blue;
+}
+
+body[class*="woocommerce"] #page .woocommerce-info:before {
+	color: blue;
+}
+
+/**
+ * Star ratings
+ */
+body[class*="woocommerce"] #page span.onsale {
+	border-radius: 100%;
+	background-color: gold;
+	color: #111111;
+	font-size: 0.83333rem;
+	font-weight: 700;
+	font-family: sans-serif;
+	min-height: 3.236rem;
+	min-width: 3.236rem;
+	padding: 0.202rem;
+	position: absolute;
+	text-align: center;
+	line-height: 3.236;
+	top: -0.5em;
+	right: -0.5em;
+	left: auto;
+	margin: 0;
+	z-index: 9;
+}
+
+/**
+ * Password strength meter
+ */
+body[class*="woocommerce"] #page .woocommerce-password-strength {
+	text-align: center;
+	font-weight: 600;
+	padding: 4px;
+	font-size: 0.83333rem;
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-strength.strong {
+	background-color: yellowgreen;
+	border-color: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-strength.good {
+	background-color: gold;
+	border-color: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-strength.short {
+	background-color: salmon;
+	border-color: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-strength.bad {
+	background-color: salmon;
+	border-color: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-password-hint {
+	font-size: 0.69444rem;
+}
+
+/**
+ * Remove Icon
+ */
+body[class*="woocommerce"] #page a.remove {
 	font-size: 1.44rem;
 	height: 1.44rem;
 	width: 1.44rem;
 	color: red !important;
 }
 
-.woocommerce a.remove:hover {
+body[class*="woocommerce"] #page a.remove:hover {
 	color: white !important;
 	background: red;
 }
 
-.woocommerce small.note {
+/**
+ * Small Note
+ */
+body[class*="woocommerce"] #page small.note {
 	color: #767676;
 	font-size: 0.83333rem;
 	margin-top: 16px;
 }
 
-.woocommerce .woocommerce-breadcrumb {
+/**
+ * Star ratings
+ */
+body[class*="woocommerce"] #page .star-rating::before {
+	color: red;
+}
+
+body[class*="woocommerce"] #page .star-rating span {
+	color: red;
+}
+
+/**
+ * Tables
+ */
+body[class*="woocommerce"] #page table.shop_table {
+	border-collapse: collapse;
+	border: 1px solid #DDDDDD;
 	margin-bottom: 32px;
-	font-size: 1rem;
-	color: #767676;
 }
 
-.woocommerce .woocommerce-breadcrumb a {
-	color: currentColor;
+body[class*="woocommerce"] #page table.shop_table td {
+	border-top: none;
+}
+
+body[class*="woocommerce"] #page table.shop_table tr {
+	border-bottom: 1px solid #DDDDDD;
+}
+
+body[class*="woocommerce"] #page table.shop_attributes {
+	border-top-color: #DDDDDD;
+	border-top-style: solid;
+	margin-bottom: 32px;
+}
+
+body[class*="woocommerce"] #page table.shop_attributes th {
+	padding: 8px;
+	border-bottom-color: #DDDDDD;
+	border-bottom-style: solid;
+	line-height: 1.78;
+}
+
+body[class*="woocommerce"] #page table.shop_attributes td {
+	font-style: inherit;
+	border-bottom-color: #DDDDDD;
+	border-bottom-style: solid;
+	line-height: 1.78;
+}
+
+body[class*="woocommerce"] #page table.shop_attributes td p {
+	margin: 0;
+	padding: 8px 0;
+}
+
+body[class*="woocommerce"] #page table.shop_attributes tr:nth-child(even) td,
+body[class*="woocommerce"] #page table.shop_attributes tr:nth-child(even) th {
+	background: rgba(0, 0, 0, 0.025);
+}
+
+body[class*="woocommerce"] #page table td,
+body[class*="woocommerce"] #page table th {
+	border: inherit;
 }
 
+/**
+ * Block Imports
+ */
 /**
  * Button
  */
@@ -316,6 +489,9 @@ body[class*="woocommerce"] #page .woocommerce input.button:disabled[disabled]:ho
 	background-color: blue;
 }
 
+/**
+ * Components Imports
+ */
 /**
  * Reviews
  */
@@ -360,243 +536,143 @@ body[class*="woocommerce"] #page .widget_shopping_cart .cart_list li a.remove {
 /**
  * Cart Collaterals
  */
-.woocommerce-cart .cart-collaterals .shipping-calculator-button,
-.woocommerce-checkout .cart-collaterals .shipping-calculator-button,
-#add_payment_method .cart-collaterals .shipping-calculator-button {
-	margin-top: 16px;
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals tr td,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals tr th,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells tr td,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells tr th,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals tr td,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals tr th,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells tr td,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells tr th {
+	border-top-color: #DDDDDD;
 }
 
-.woocommerce-cart .cart-collaterals .shipping-calculator-form,
-.woocommerce-checkout .cart-collaterals .shipping-calculator-form,
-#add_payment_method .cart-collaterals .shipping-calculator-form {
-	margin-top: 16px;
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > h2,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > h2,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals > h2,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells > h2 {
+	font-size: 1.44rem;
 }
 
-.woocommerce-cart .cart-collaterals .cart_totals p small,
-.woocommerce-checkout .cart-collaterals .cart_totals p small,
-#add_payment_method .cart-collaterals .cart_totals p small {
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals p small,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals p small {
 	color: #767676;
 	font-size: 0.83333rem;
 }
 
-.woocommerce-cart .cart-collaterals .cart_totals table,
-.woocommerce-checkout .cart-collaterals .cart_totals table,
-#add_payment_method .cart-collaterals .cart_totals table {
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals table,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals table {
 	margin: 0 0 8px;
 }
 
-.woocommerce-cart .cart-collaterals .cart_totals table td,
-.woocommerce-cart .cart-collaterals .cart_totals table th,
-.woocommerce-checkout .cart-collaterals .cart_totals table td,
-.woocommerce-checkout .cart-collaterals .cart_totals table th,
-#add_payment_method .cart-collaterals .cart_totals table td,
-#add_payment_method .cart-collaterals .cart_totals table th {
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals table td,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals table th,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals table td,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals table th {
 	line-height: 1.78;
 }
 
-.woocommerce-cart .cart-collaterals .cart_totals table small,
-.woocommerce-checkout .cart-collaterals .cart_totals table small,
-#add_payment_method .cart-collaterals .cart_totals table small {
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals table small,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals table small {
 	color: #767676;
 }
 
-.woocommerce-cart .cart-collaterals .cart_totals .discount td,
-.woocommerce-checkout .cart-collaterals .cart_totals .discount td,
-#add_payment_method .cart-collaterals .cart_totals .discount td {
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals .discount td,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_totals .discount td {
 	color: gold;
 }
 
-.woocommerce-cart .cart-collaterals .cart_totals tr td,
-.woocommerce-cart .cart-collaterals .cart_totals tr th,
-.woocommerce-checkout .cart-collaterals .cart_totals tr td,
-.woocommerce-checkout .cart-collaterals .cart_totals tr th,
-#add_payment_method .cart-collaterals .cart_totals tr td,
-#add_payment_method .cart-collaterals .cart_totals tr th {
-	border-top-color: #DDDDDD;
-}
-
-.woocommerce .cart-collaterals .cross-sells > h2,
-.woocommerce-page .cart-collaterals .cross-sells > h2,
-.woocommerce .cart-collaterals .cart_totals > h2,
-.woocommerce-page .cart-collaterals .cart_totals > h2 {
-	font-size: 1.44rem;
-}
-
-/**
- * Notices
- */
-.woocommerce .woocommerce-message,
-.woocommerce .woocommerce-error,
-.woocommerce .woocommerce-info {
-	padding: 16px 32px 16px 64px;
-	margin-bottom: 32px;
-	background-color: #FAFAFA;
-	color: #111111;
-	border-top-color: blue;
-}
-
-.woocommerce .woocommerce-message {
-	border-top-color: yellowgreen;
-}
-
-.woocommerce .woocommerce-message:before {
-	color: yellowgreen;
-}
-
-.woocommerce .woocommerce-error {
-	border-top-color: salmon;
-}
-
-.woocommerce .woocommerce-error:before {
-	color: salmon;
-}
-
-.woocommerce .woocommerce-info {
-	border-top-color: blue;
-}
-
-.woocommerce .woocommerce-info:before {
-	color: blue;
-}
-
-/**
- * Star ratings
- */
-.woocommerce #content span.onsale {
-	border-radius: 100%;
-	background-color: gold;
-	color: #111111;
-	font-size: 0.83333rem;
-	font-weight: 700;
-	font-family: sans-serif;
-	min-height: 3.236rem;
-	min-width: 3.236rem;
-	padding: 0.202rem;
-	position: absolute;
-	text-align: center;
-	line-height: 3.236;
-	top: -0.5em;
-	right: -0.5em;
-	left: auto;
-	margin: 0;
-	z-index: 9;
-}
-
-/**
- * Password strength meter
- */
-.woocommerce-password-strength {
-	text-align: center;
-	font-weight: 600;
-	padding: 4px;
-	font-size: 0.83333rem;
-}
-
-.woocommerce-password-strength.strong {
-	background-color: yellowgreen;
-	border-color: none;
-}
-
-.woocommerce-password-strength.good {
-	background-color: gold;
-	border-color: none;
-}
-
-.woocommerce-password-strength.short {
-	background-color: salmon;
-	border-color: none;
-}
-
-.woocommerce-password-strength.bad {
-	background-color: salmon;
-	border-color: none;
+body[class*="woocommerce"] #page .cart-collaterals .shipping-calculator-button,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .shipping-calculator-button {
+	margin-top: 16px;
 }
 
-woocommerce-password-hint {
-	font-size: 0.69444rem;
+body[class*="woocommerce"] #page .cart-collaterals .shipping-calculator-form,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .shipping-calculator-form {
+	margin-top: 16px;
 }
 
 /**
  * Product loops
  */
-#content .woocommerce .products ul,
-#content .woocommerce ul.products {
+#woocommerce-wrapper .products ul,
+#woocommerce-wrapper ul.products {
 	margin: 0;
 	padding: 0;
 }
 
-#content .woocommerce ul.products li.product .star-rating {
+#woocommerce-wrapper ul.products li.product .star-rating {
 	margin: inherit;
 }
 
-#content .woocommerce ul.products li.product h3,
-#content .woocommerce ul.products li.product .woocommerce-loop-product__title,
-#content .woocommerce ul.products li.product .woocommerce-loop-category__title {
+#woocommerce-wrapper ul.products li.product h3,
+#woocommerce-wrapper ul.products li.product .woocommerce-loop-product__title,
+#woocommerce-wrapper ul.products li.product .woocommerce-loop-category__title {
 	padding: inherit;
 	margin: inherit;
 	font-size: 1rem;
 }
 
-#content .woocommerce ul.products li.product a img {
+#woocommerce-wrapper ul.products li.product a img {
 	margin: inherit;
 }
 
-#content .woocommerce ul.products li.product .woocommerce-placeholder {
+#woocommerce-wrapper ul.products li.product .woocommerce-placeholder {
 	border-color: #DDDDDD;
 }
 
-#content .woocommerce ul.products li.product .star-rating {
+#woocommerce-wrapper ul.products li.product .star-rating {
 	font-size: 0.83333rem;
 }
 
-#content .woocommerce ul.products li.product .button {
+#woocommerce-wrapper ul.products li.product .button {
 	margin-top: inherit;
 }
 
-#content .woocommerce ul.products li.product .price {
+#woocommerce-wrapper ul.products li.product .price {
 	color: #111111;
 	margin-bottom: inherit;
 	font-size: 1.2rem;
 }
 
-#content .woocommerce ul.products li.product .price del {
+#woocommerce-wrapper ul.products li.product .price del {
 	color: inherit;
 	opacity: 0.5;
 	display: inline-block;
 }
 
-#content .woocommerce ul.products li.product .price ins {
+#woocommerce-wrapper ul.products li.product .price ins {
 	background: none;
 	font-weight: 700;
 	display: inline-block;
 }
 
-#content .woocommerce ul.products li.product .price .from {
+#woocommerce-wrapper ul.products li.product .price .from {
 	font-size: 0.69444rem;
 	color: gold;
 }
 
-#content .woocommerce ul.products li.product.sale a > .price ins {
+#woocommerce-wrapper ul.products li.product.sale a > .price ins {
 	color: yellowgreen;
 }
 
-#content .woocommerce .woocommerce-result-count {
+#woocommerce-wrapper .woocommerce-result-count {
 	margin-bottom: 16px;
 }
 
-#content .woocommerce .woocommerce-ordering {
+#woocommerce-wrapper .woocommerce-ordering {
 	margin-bottom: 16px;
 }
 
-#content .woocommerce .woocommerce-ordering select {
+#woocommerce-wrapper .woocommerce-ordering select {
 	vertical-align: top;
 }
 
-#content .woocommerce nav.woocommerce-pagination {
+#woocommerce-wrapper nav.woocommerce-pagination {
 	text-align: center;
 }
 
-#content .woocommerce nav.woocommerce-pagination ul {
+#woocommerce-wrapper nav.woocommerce-pagination ul {
 	display: inline-block;
 	white-space: nowrap;
 	padding: 0;
@@ -606,7 +682,7 @@ woocommerce-password-hint {
 	margin: 1px;
 }
 
-#content .woocommerce nav.woocommerce-pagination ul li {
+#woocommerce-wrapper nav.woocommerce-pagination ul li {
 	border-color: #DDDDDD;
 	padding: 0;
 	margin: 0;
@@ -615,8 +691,8 @@ woocommerce-password-hint {
 	overflow: hidden;
 }
 
-#content .woocommerce nav.woocommerce-pagination ul li a,
-#content .woocommerce nav.woocommerce-pagination ul li span {
+#woocommerce-wrapper nav.woocommerce-pagination ul li a,
+#woocommerce-wrapper nav.woocommerce-pagination ul li span {
 	margin: 0;
 	text-decoration: none;
 	padding: 0;
@@ -628,9 +704,9 @@ woocommerce-password-hint {
 	display: block;
 }
 
-#content .woocommerce nav.woocommerce-pagination ul li span.current,
-#content .woocommerce nav.woocommerce-pagination ul li a:hover,
-#content .woocommerce nav.woocommerce-pagination ul li a:focus {
+#woocommerce-wrapper nav.woocommerce-pagination ul li span.current,
+#woocommerce-wrapper nav.woocommerce-pagination ul li a:hover,
+#woocommerce-wrapper nav.woocommerce-pagination ul li a:focus {
 	background: #DDDDDD;
 	color: #767676;
 }
@@ -712,69 +788,6 @@ woocommerce-password-hint {
 	content: "";
 }
 
-/**
- * Star ratings
- */
-.woocommerce #content .star-rating::before {
-	color: red;
-}
-
-.woocommerce #content .star-rating span {
-	color: red;
-}
-
-/**
- * Tables
- */
-.woocommerce table.shop_table {
-	border-collapse: collapse;
-	border: 1px solid #DDDDDD;
-	margin-bottom: 32px;
-}
-
-.woocommerce table.shop_table td {
-	border-top: none;
-}
-
-.woocommerce table.shop_table tr {
-	border-bottom: 1px solid #DDDDDD;
-}
-
-.woocommerce table.shop_attributes {
-	border-top-color: #DDDDDD;
-	border-top-style: solid;
-	margin-bottom: 32px;
-}
-
-.woocommerce table.shop_attributes th {
-	padding: 8px;
-	border-bottom-color: #DDDDDD;
-	border-bottom-style: solid;
-	line-height: 1.78;
-}
-
-.woocommerce table.shop_attributes td {
-	font-style: inherit;
-	border-bottom-color: #DDDDDD;
-	border-bottom-style: solid;
-	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 table td,
-.woocommerce table th {
-	border: inherit;
-}
-
 /**
  * Structure
  */
@@ -841,157 +854,174 @@ woocommerce-password-hint {
 /**
  * Vertical Space - 16px
  */
-#content .woocommerce ul.products li.product a > *:not(:first-child),
-#content .woocommerce ul.products li.product-category a > *:not(:first-child),
-.woocommerce .cart-collaterals .cross-sells > *:not(:first-child),
-.woocommerce-page .cart-collaterals .cross-sells > *:not(:first-child),
-.woocommerce .cart-collaterals .cart_totals > *:not(:first-child),
-.woocommerce-page .cart-collaterals .cart_totals > *:not(:first-child),
-.woocommerce .widget_shopping_cart > *:not(:first-child),
-.woocommerce .widget_shopping_cart_content > *:not(:first-child) {
+#woocommerce-wrapper ul.products li.product a > *:not(:first-child),
+#woocommerce-wrapper ul.products li.product-category a > *:not(:first-child),
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:not(:first-child),
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:not(:first-child),
+body[class*="woocommerce"] #page .widget_shopping_cart > *:not(:first-child),
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:not(:first-child) {
 	margin-top: 16px;
 }
 
-#content .woocommerce ul.products li.product a > *:not(:last-child),
-#content .woocommerce ul.products li.product a > .price,
-#content .woocommerce ul.products li.product-category a > *:not(:last-child),
-#content .woocommerce ul.products li.product-category a > .price,
-.woocommerce .cart-collaterals .cross-sells > *:not(:last-child),
-.woocommerce .cart-collaterals .cross-sells > .price,
-.woocommerce-page .cart-collaterals .cross-sells > *:not(:last-child),
-.woocommerce-page .cart-collaterals .cross-sells > .price,
-.woocommerce .cart-collaterals .cart_totals > *:not(:last-child),
-.woocommerce .cart-collaterals .cart_totals > .price,
-.woocommerce-page .cart-collaterals .cart_totals > *:not(:last-child),
-.woocommerce-page .cart-collaterals .cart_totals > .price,
-.woocommerce .widget_shopping_cart > *:not(:last-child),
-.woocommerce .widget_shopping_cart > .price,
-.woocommerce .widget_shopping_cart_content > *:not(:last-child),
-.woocommerce .widget_shopping_cart_content > .price {
+#woocommerce-wrapper ul.products li.product a > *:not(:last-child),
+#woocommerce-wrapper ul.products li.product a > .price,
+#woocommerce-wrapper ul.products li.product-category a > *:not(:last-child),
+#woocommerce-wrapper ul.products li.product-category a > .price,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:not(:last-child),
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > .price,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:not(:last-child),
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > .price,
+body[class*="woocommerce"] #page .widget_shopping_cart > *:not(:last-child),
+body[class*="woocommerce"] #page .widget_shopping_cart > .price,
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:not(:last-child),
+body[class*="woocommerce"] #page .widget_shopping_cart_content > .price {
 	margin-bottom: 16px;
 }
 
-#content .woocommerce ul.products li.product a > *:not(img):empty + *,
-#content .woocommerce ul.products li.product-category a > *:not(img):empty + *,
-.woocommerce .cart-collaterals .cross-sells > *:not(img):empty + *,
-.woocommerce-page .cart-collaterals .cross-sells > *:not(img):empty + *,
-.woocommerce .cart-collaterals .cart_totals > *:not(img):empty + *,
-.woocommerce-page .cart-collaterals .cart_totals > *:not(img):empty + *,
-.woocommerce .widget_shopping_cart > *:not(img):empty + *,
-.woocommerce .widget_shopping_cart_content > *:not(img):empty + * {
+#woocommerce-wrapper ul.products li.product a > *:not(img):empty + *,
+#woocommerce-wrapper ul.products li.product-category a > *:not(img):empty + *,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:not(img):empty + *,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:not(img):empty + *,
+body[class*="woocommerce"] #page .widget_shopping_cart > *:not(img):empty + *,
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:not(img):empty + * {
 	margin-top: 0;
 }
 
-#content .woocommerce ul.products li.product a > *:empty,
-#content .woocommerce ul.products li.product-category a > *:empty,
-.woocommerce .cart-collaterals .cross-sells > *:empty,
-.woocommerce-page .cart-collaterals .cross-sells > *:empty,
-.woocommerce .cart-collaterals .cart_totals > *:empty,
-.woocommerce-page .cart-collaterals .cart_totals > *:empty,
-.woocommerce .widget_shopping_cart > *:empty,
-.woocommerce .widget_shopping_cart_content > *:empty {
+#woocommerce-wrapper ul.products li.product a > *:empty,
+#woocommerce-wrapper ul.products li.product-category a > *:empty,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells > *:empty,
+body[class*="woocommerce"] #page .cart-collaterals .cart_totals > *:empty,
+body[class*="woocommerce"] #page .widget_shopping_cart > *:empty,
+body[class*="woocommerce"] #page .widget_shopping_cart_content > *:empty {
 	margin: 0;
 }
 
+/**
+ * Page Imports
+ */
 /**
  * Account page
  */
-.woocommerce-account #content .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
+.woocommerce-account #page .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
 	display: none;
 }
 
-.woocommerce-account #content .woocommerce-MyAccount-content fieldset {
+.woocommerce-account #page .woocommerce-MyAccount-content fieldset {
 	border: 1px solid #DDDDDD;
 	padding: 16px;
 	border-radius: 3px;
 }
 
-.woocommerce-account #content .addresses .title h3 {
+.woocommerce-account #page .addresses .title h3 {
 	font-size: 1rem;
 }
 
-/**
- * Cart
- */
 /**
  * Cart/checkout page
  */
-.woocommerce-cart table.cart .product-thumbnail,
-.woocommerce-checkout table.cart .product-thumbnail,
-#add_payment_method table.cart .product-thumbnail {
+body[class*="woocommerce"] #page table.shop_table {
+	border-color: #DDDDDD;
+	border-radius: 3px;
+}
+
+body[class*="woocommerce"] #page table.shop_table th {
+	padding: 8px 16px;
+	line-height: 1.78;
+}
+
+body[class*="woocommerce"] #page table.shop_table td {
+	padding: 8px 16px;
+	line-height: 1.78;
+}
+
+body[class*="woocommerce"] #page table.shop_table tfoot td,
+body[class*="woocommerce"] #page table.shop_table tfoot th,
+body[class*="woocommerce"] #page table.shop_table tbody th {
+	border-top-color: #DDDDDD;
+}
+
+body[class*="woocommerce"] #page table.my_account_orders {
+	font-size: 0.83333rem;
+}
+
+body[class*="woocommerce"] #page table.my_account_orders th,
+body[class*="woocommerce"] #page table.my_account_orders td {
+	padding: 4px 8px;
+}
+
+body[class*="woocommerce"] #page td.product-name dl.variation dt,
+body[class*="woocommerce"] #page td.product-name dl.variation .wc-item-meta-label,
+body[class*="woocommerce"] #page td.product-name .wc-item-meta dt,
+body[class*="woocommerce"] #page td.product-name .wc-item-meta .wc-item-meta-label {
+	margin-right: 8px;
+}
+
+body[class*="woocommerce"] #page td.product-name p.backorder_notification {
+	font-size: 0.83333rem;
+}
+
+body[class*="woocommerce"] #page td.product-quantity {
+	min-width: 80px;
+}
+
+body[class*="woocommerce"] #page table.cart td.actions .input-text {
+	width: inherit;
+	float: inherit;
+	padding: 16px;
+}
+
+body[class*="woocommerce"] #page #add_payment_method table.cart .product-thumbnail {
 	min-width: 16px;
 }
 
-.woocommerce-cart table.cart img,
-.woocommerce-checkout table.cart img,
-#add_payment_method table.cart img {
+body[class*="woocommerce"] #page #add_payment_method table.cart img {
 	width: 64px;
 }
 
-.woocommerce-cart table.cart td.actions .coupon .input-text,
-.woocommerce-checkout table.cart td.actions .coupon .input-text,
-#add_payment_method table.cart td.actions .coupon .input-text {
+body[class*="woocommerce"] #page #add_payment_method table.cart td.actions .coupon .input-text {
 	border-color: #DDDDDD;
 	padding: 8px;
 	margin: 0 8px 0 0;
 }
 
-.woocommerce-cart .wc-proceed-to-checkout,
-.woocommerce-checkout .wc-proceed-to-checkout,
-#add_payment_method .wc-proceed-to-checkout {
+body[class*="woocommerce"] #page #add_payment_method .wc-proceed-to-checkout {
 	padding: 32px 0;
 }
 
-.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
-.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button,
-#add_payment_method .wc-proceed-to-checkout a.checkout-button {
+body[class*="woocommerce"] #page #add_payment_method .wc-proceed-to-checkout a.checkout-button {
 	margin-bottom: 32px;
 	font-size: 1.2rem;
 	padding: 16px;
 }
 
-.woocommerce-cart .checkout .create-account small,
-.woocommerce-checkout .checkout .create-account small,
-#add_payment_method .checkout .create-account small {
+body[class*="woocommerce"] #page #add_payment_method .checkout .create-account small {
 	font-size: 0.69444rem;
 	color: #767676;
 }
 
-.woocommerce-cart #payment,
-.woocommerce-checkout #payment,
-#add_payment_method #payment {
+body[class*="woocommerce"] #page #add_payment_method #payment {
 	background: #FAFAFA;
 	border-radius: 3px;
 }
 
-.woocommerce-cart #payment ul.payment_methods,
-.woocommerce-checkout #payment ul.payment_methods,
-#add_payment_method #payment ul.payment_methods {
+body[class*="woocommerce"] #page #add_payment_method #payment ul.payment_methods {
 	padding: 8px;
 	border-bottom-color: #DDDDDD;
 }
 
-.woocommerce-cart #payment ul.payment_methods li,
-.woocommerce-checkout #payment ul.payment_methods li,
-#add_payment_method #payment ul.payment_methods li {
+body[class*="woocommerce"] #page #add_payment_method #payment ul.payment_methods li {
 	line-height: 1.78;
 }
 
-.woocommerce-cart #payment ul.payment_methods li input,
-.woocommerce-checkout #payment ul.payment_methods li input,
-#add_payment_method #payment ul.payment_methods li input {
+body[class*="woocommerce"] #page #add_payment_method #payment ul.payment_methods li input {
 	margin-right: 1.78;
 }
 
-.woocommerce-cart #payment div.form-row,
-.woocommerce-checkout #payment div.form-row,
-#add_payment_method #payment div.form-row {
+body[class*="woocommerce"] #page #add_payment_method #payment div.form-row {
 	padding: 8px;
 }
 
-.woocommerce-cart #payment div.payment_box,
-.woocommerce-checkout #payment div.payment_box,
-#add_payment_method #payment div.payment_box {
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box {
 	padding: 8px;
 	margin-bottom: 8px;
 	margin-top: 8px;
@@ -1002,170 +1032,76 @@ woocommerce-password-hint {
 	color: #444444;
 }
 
-.woocommerce-cart #payment div.payment_box input.input-text,
-.woocommerce-cart #payment div.payment_box textarea,
-.woocommerce-checkout #payment div.payment_box input.input-text,
-.woocommerce-checkout #payment div.payment_box textarea,
-#add_payment_method #payment div.payment_box input.input-text,
-#add_payment_method #payment div.payment_box textarea {
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box input.input-text,
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box textarea {
 	border-color: #DDDDDD;
 	border-top-color: #DDDDDD;
 }
 
-.woocommerce-cart #payment div.payment_box ::-webkit-input-placeholder,
-.woocommerce-checkout #payment div.payment_box ::-webkit-input-placeholder,
-#add_payment_method #payment div.payment_box ::-webkit-input-placeholder {
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box ::-webkit-input-placeholder {
 	color: #767676;
 }
 
-.woocommerce-cart #payment div.payment_box :-moz-placeholder,
-.woocommerce-checkout #payment div.payment_box :-moz-placeholder,
-#add_payment_method #payment div.payment_box :-moz-placeholder {
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box :-moz-placeholder {
 	color: #767676;
 }
 
-.woocommerce-cart #payment div.payment_box :-ms-input-placeholder,
-.woocommerce-checkout #payment div.payment_box :-ms-input-placeholder,
-#add_payment_method #payment div.payment_box :-ms-input-placeholder {
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box :-ms-input-placeholder {
 	color: #767676;
 }
 
-.woocommerce-cart #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-tokenInput,
-.woocommerce-checkout #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-tokenInput,
-#add_payment_method #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-tokenInput {
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box .woocommerce-SavedPaymentMethods .woocommerce-SavedPaymentMethods-tokenInput {
 	margin-right: 16px;
 }
 
-.woocommerce-cart #payment div.payment_box .wc-credit-card-form,
-.woocommerce-checkout #payment div.payment_box .wc-credit-card-form,
-#add_payment_method #payment div.payment_box .wc-credit-card-form {
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box .wc-credit-card-form {
 	margin-top: 16px;
 }
 
-.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number,
-.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry,
-.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc,
-.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number,
-.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry,
-.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc,
-#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number,
-#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry,
-#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc {
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box .wc-credit-card-form-card-number,
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry,
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc {
 	font-size: 1.44rem;
 	padding: 8px;
 }
 
-.woocommerce-cart #payment div.payment_box span.help,
-.woocommerce-checkout #payment div.payment_box span.help,
-#add_payment_method #payment div.payment_box span.help {
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box span.help {
 	font-size: 0.83333rem;
 	color: #767676;
 }
 
-.woocommerce-cart #payment div.payment_box .form-row,
-.woocommerce-checkout #payment div.payment_box .form-row,
-#add_payment_method #payment div.payment_box .form-row {
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box .form-row {
 	margin: 0 0 32px;
 }
 
-.woocommerce-cart #payment div.payment_box p:last-child,
-.woocommerce-checkout #payment div.payment_box p:last-child,
-#add_payment_method #payment div.payment_box p:last-child {
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box p:last-child {
 	margin-bottom: 0;
 }
 
-.woocommerce-cart #payment div.payment_box::before,
-.woocommerce-checkout #payment div.payment_box::before,
-#add_payment_method #payment div.payment_box::before {
+body[class*="woocommerce"] #page #add_payment_method #payment div.payment_box::before {
 	border-bottom-color: #DDDDDD;
 	/* arrow size / color */
 }
 
-.woocommerce-cart #payment .payment_method_paypal .about_paypal,
-.woocommerce-checkout #payment .payment_method_paypal .about_paypal,
-#add_payment_method #payment .payment_method_paypal .about_paypal {
+body[class*="woocommerce"] #page #add_payment_method #payment .payment_method_paypal .about_paypal {
 	float: right;
 	line-height: 52px;
 	font-size: 0.83333rem;
 }
 
-.woocommerce-cart #payment .payment_method_paypal img,
-.woocommerce-checkout #payment .payment_method_paypal img,
-#add_payment_method #payment .payment_method_paypal img {
+body[class*="woocommerce"] #page #add_payment_method #payment .payment_method_paypal img {
 	max-height: 52px;
 	vertical-align: middle;
 }
 
-.woocommerce-terms-and-conditions {
+body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
 	border-color: #DDDDDD;
 }
 
-.woocommerce-invalid #terms {
+body[class*="woocommerce"] #page .woocommerce-invalid #terms {
 	outline-color: salmon;
 }
 
-.woocommerce-cart #content table.shop_table {
-	border-color: #DDDDDD;
-	border-radius: 3px;
-}
-
-.woocommerce-cart #content table.shop_table th {
-	padding: 8px 16px;
-	line-height: 1.78;
-}
-
-.woocommerce-cart #content table.shop_table td {
-	padding: 8px 16px;
-	line-height: 1.78;
-}
-
-.woocommerce-cart #content table.shop_table tfoot td,
-.woocommerce-cart #content table.shop_table tfoot th,
-.woocommerce-cart #content table.shop_table tbody th {
-	border-top-color: #DDDDDD;
-}
-
-.woocommerce-cart #content table.my_account_orders {
-	font-size: 0.83333rem;
-}
-
-.woocommerce-cart #content table.my_account_orders th,
-.woocommerce-cart #content table.my_account_orders td {
-	padding: 4px 8px;
-}
-
-.woocommerce-cart #content td.product-name dl.variation dt,
-.woocommerce-cart #content td.product-name dl.variation .wc-item-meta-label,
-.woocommerce-cart #content td.product-name .wc-item-meta dt,
-.woocommerce-cart #content td.product-name .wc-item-meta .wc-item-meta-label {
-	margin-right: 8px;
-}
-
-.woocommerce-cart #content td.product-name p.backorder_notification {
-	font-size: 0.83333rem;
-}
-
-.woocommerce-cart #content td.product-quantity {
-	min-width: 80px;
-}
-
-.woocommerce-page #content table.cart td.actions .input-text,
-.woocommerce-page #content .woocommerce table.cart td.actions .input-text,
-.woocommerce-page #content table.cart td.actions .input-text {
-	width: inherit;
-	float: inherit;
-	padding: 16px;
-}
-
-#add_payment_method .cart-collaterals .cart_totals tr td,
-#add_payment_method .cart-collaterals .cart_totals tr th,
-.woocommerce-cart .cart-collaterals .cart_totals tr td,
-.woocommerce-cart .cart-collaterals .cart_totals tr th,
-.woocommerce-checkout .cart-collaterals .cart_totals tr td,
-.woocommerce-checkout .cart-collaterals .cart_totals tr th {
-	border-top-color: #DDDDDD;
-}
-
 /**
  * Product Page
  */

varia/style.css

@@ -2420,6 +2420,11 @@ table th,
 	z-index: 99999;
 }
 
+.main-navigation > div > ul li:hover, .main-navigation > div > ul li[focus-within] {
+	cursor: pointer;
+	z-index: 99999;
+}
+
 .main-navigation > div > ul li:hover, .main-navigation > div > ul li:focus-within {
 	cursor: pointer;
 	z-index: 99999;
@@ -2440,6 +2445,14 @@ table th,
 		display: block;
 	}
 	.main-navigation > div > ul li:hover > ul,
+	.main-navigation > div > ul li[focus-within] > ul,
+	.main-navigation > div > ul li ul:hover,
+	.main-navigation > div > ul li ul:focus {
+		visibility: visible;
+		opacity: 1;
+		display: block;
+	}
+	.main-navigation > div > ul li:hover > ul,
 	.main-navigation > div > ul li:focus-within > ul,
 	.main-navigation > div > ul li ul:hover,
 	.main-navigation > div > ul li ul:focus {