Varia: Code tidying and file restructuring.

varia/sass/child-theme/_config-child-theme-deep.scss

@@ -16,16 +16,16 @@ $typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-
 
 $config-global: (
 
-	/* Fonts */
+	// Fonts
 	"font": (
-		/* Font Family */
+		// Font Family
 		"family": (
 			"primary": "sans-serif",
 			"secondary": "serif",
 			"code": "monospace, monospace",
 			"ui": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
 		),
-		/* Font Size */
+		// Font Size
 		"size": (
 			"root": $typescale-root,
 			"ratio": $typescale-ratio,
@@ -39,7 +39,7 @@ $config-global: (
 			"xxxl": ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio),
 			"xxxxl": ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio),
 		),
-		/* Letter Spacing */
+		// Letter Spacing
 		"letter-spacing": (
 			"base": normal,
 			"xs": normal,
@@ -50,7 +50,7 @@ $config-global: (
 			"xxl": normal,
 			"xxxl": normal,
 		),
-		/* Line Height */
+		// Line Height
 		"line-height": (
 			"base": strip-unit($typescale-base),
 			"body": 1.78,
@@ -58,7 +58,7 @@ $config-global: (
 		),
 	),
 
-	/* Colors */
+	// Colors
 	"color": (
 		"primary": (
 			"default": blue,
@@ -93,16 +93,14 @@ $config-global: (
 		"black": black,
 		"white": white,
 	),
-
-	/* Spacing */
+	// Spacing
 	"spacing": (
 		"unit": (2 * $baseline-unit), // 16px
 		"measure": inherit, // Use ch units here. ie: 60ch = 60 character max-width
 		"horizontal": (2 * $baseline-unit), // 16px
 		"vertical": (4 * $baseline-unit), // 32px matches default spacing in the editor.
 	),
-
-	/* Breakpoints */
+	// Breakpoints
 	"breakpoint": (
 		"sm": 560px,
 		"md": 640px,
@@ -110,8 +108,7 @@ $config-global: (
 		"xl": 1024px,
 		"xxl": 1280px,
 	),
-
-	/* Elevation */
+	// Elevation
 	"elevation": (
 		"none": 0px 0px 0px 0px rgba( 0, 0, 0, 0 ),
 		"2dp": 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ),
@@ -120,8 +117,7 @@ $config-global: (
 		"8dp": 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ),
 		"10dp": 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ),
 	),
-
-	/* Border radius */
+	// Border radius
 	"border-radius": (
 		"sm": (0.5 * $typescale-root),
 		"md": (0.75 * $typescale-root),
@@ -134,16 +130,13 @@ $config-global: (
  * Elements
  */
 $config-elements: (
-
 	"form": (
-
 		// Colors
 		"color": (
 			"text": map-deep-get($config-global, "color", "foreground", "default"),
 			"border": map-deep-get($config-global, "color", "border", "default"),
 			"border-focus": map-deep-get($config-global, "color", "primary", "hover"),
 		),
-
 		// Fonts
 		"font": (
 			"family": map-deep-get($config-global, "font", "family", "secondary"),
@@ -151,13 +144,11 @@ $config-elements: (
 			"size": map-deep-get($config-global, "font", "size", "md"),
 			"weight": bold,
 		),
-
 		// Borders
 		"border": (
 			"width": 1px,
 			"radius": 3px,
 		),
-
 		"padding": #{map-deep-get($config-global, "spacing", "unit")},
 	),
 );
@@ -283,7 +274,6 @@ $config-quote: (
 /**
  * Separator
  */
-
 $config-separator: (
 	"height": #{0.25 * $baseline-unit},
 );
@@ -299,7 +289,7 @@ $config-header: (
 			"link": map-deep-get($config-global, "color", "primary", "default"),
 			"link-hover": map-deep-get($config-global, "color", "primary", "hover"),
 		),
-		// Fonts & Typography
+		// Title
 		"title": (
 			// Fonts
 			"font": (
@@ -309,7 +299,7 @@ $config-header: (
 				"line-height": 1,
 			),
 		),
-		// Fonts & Typography
+		// Description
 		"description": (
 			// Fonts
 			"font": (

varia/sass/child-theme/_config-child-theme-woocommerce.scss

@@ -0,0 +1,34 @@
+/**
+ * Redefine Sass map values for child theme WooCommerce output.
+ */
+
+$config-woocommerce: (
+
+	/* Tables */
+	"table": (
+		/* Borders */
+		"border": (
+			"color": map-deep-get($config-global, "color", "border", "default"),
+			"radius": 0,
+			"width": 1px,
+		),
+		"padding": map-deep-get($config-global, "spacing", "unit"),
+	),
+
+	/* Tabs */
+	"tabs": (
+		/* Borders */
+		"border": (
+			"color": map-deep-get($config-global, "color", "border", "default"),
+			"radius": 10px,
+			"width": 1px,
+		),
+		"padding": map-deep-get($config-global, "spacing", "horizontal"),
+	),
+
+	/* Star Rating */
+	"star-rating": (
+		/* Font Family */
+		"color": map-deep-get($config-global, "color", "alert", "warning"),
+	),
+);

varia/sass/child-theme/style-woocommerce.scss → varia/sass/child-theme/style-child-theme-woocommerce.scss

@@ -21,6 +21,11 @@
  */
 @import "config-child-theme-deep";
 
+/**
+ * Child Theme Name WooCommerce Variables
+ */
+@import "config-child-theme-woocommerce";
+
 /**
  * Varia Extends
  */

varia/sass/vendors/woocommerce/abstracts/_config-woocommerce.scss

@@ -1,18 +1,23 @@
-// WooCommerce
+/**
+ * WooCommerce Variables
+ */
+
 $config-woocommerce: (
 
 	/* Tables */
 	"table": (
-		/* Font Family */
-		"border-color": map-deep-get($config-global, "color", "border", "default"),
-		"border-radius": 0,
-		"border-width": 1px,
+		/* Borders */
+		"border": (
+			"color": map-deep-get($config-global, "color", "border", "default"),
+			"radius": 0,
+			"width": 1px,
+		),
 		"padding": map-deep-get($config-global, "spacing", "unit"),
 	),
 
-	/* Tables */
+	/* Tabs */
 	"tabs": (
-		/* Font Family */
+		/* Borders */
 		"border": (
 			"color": map-deep-get($config-global, "color", "border", "default"),
 			"radius": 10px,
@@ -20,4 +25,10 @@ $config-woocommerce: (
 		),
 		"padding": map-deep-get($config-global, "spacing", "horizontal"),
 	),
-);
+
+	/* Star Rating */
+	"star-rating": (
+		/* Font Family */
+		"color": map-deep-get($config-global, "color", "alert", "warning"),
+	),
+);

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

@@ -3,4 +3,3 @@
  */
 
 @import "config-woocommerce";
-@import "extends";

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

@@ -12,7 +12,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 
 			tr td,
 			tr th {
-				border-top-color: map-deep-get($config-global, "color", "border", "default");
+				border-top-color: map-deep-get($config-woocommerce, "table", "border", "color");
 			}
 
 			& > h2 {
@@ -28,7 +28,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 			}
 
 			table {
-				margin: 0 0 (0.5 * map-deep-get($config-global, "spacing", "unit"));
+				margin: 0 0 (0.5 * map-deep-get($config-woocommerce, "table", "padding"));
 
 				td,
 				th {
@@ -45,13 +45,9 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 			}
 		}
 
-		.shipping-calculator-button {
-			margin-top: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
-		}
-
+		.shipping-calculator-button,
 		.shipping-calculator-form {
-			margin-top: map-deep-get($config-global, "spacing", "horizontal");
+			margin-top: map-deep-get($config-woocommerce, "table", "padding");
 		}
 	}
 }
-

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

@@ -23,7 +23,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 			}
 
 			dl {
-				border-left-color: map-deep-get($config-global, "color", "border", "default");
+				border-left-color: map-deep-get($config-woocommerce, "table", "border", "color");
 
 				dt,
 				dd {
@@ -42,10 +42,10 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 
 		.cart_list {
 
-			border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
+			border-bottom: 1px solid map-deep-get($config-woocommerce, "table", "border", "color");
 
 			li {
-				border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
+				border-top: 1px solid map-deep-get($config-woocommerce, "table", "border", "color");
 				padding: map-deep-get($config-global, "spacing", "unit") 0 map-deep-get($config-global, "spacing", "unit") #{2 * map-deep-get($config-global, "spacing", "horizontal")};
 
 				a.remove {

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

@@ -7,6 +7,5 @@
 @import "mini-cart";
 @import "pagination";
 @import "product-loops";
-@import "products-header";
 @import "product-tabs";
 @import "reviews";

varia/sass/vendors/woocommerce/components/_mini-cart.scss

@@ -30,10 +30,17 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		ul.product_list_widget li a {
 			padding: 0;
 		}
+
+		ul.cart_list li .quantity,
+		ul.product_list_widget li .quantity,
+		ul.cart_list li a:not(.remove),
+		ul.product_list_widget li a:not(.remove) {
+			font-size: #{map-deep-get($config-global, "font", "size", "base")};
+		}
 	}
 }
 
 .woocommerce-cart #page .woocommerce-menu-item .sub-menu,
 .woocommerce-checkout #page .woocommerce-menu-item .sub-menu {
 	display: none;
-}
+}

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

@@ -2,13 +2,13 @@
  * Pagination
  */
 
-// Index/archive navigation
 body[class*="woocommerce"] #page .woocommerce-pagination {
 
 	margin: 0 calc(-0.66 * #{map-deep-get($config-global, "spacing", "unit")});
 	width: 100%;
 
 	.page-numbers {
+
 		border: none;
 		display: flex;
 		justify-content: start;
@@ -44,46 +44,3 @@ body[class*="woocommerce"] #page .woocommerce-pagination {
 		}
 	}
 }
-
-	sssnav.woocommerce-pagination {
-		text-align: center;
-
-		ul {
-			display: inline-block;
-			white-space: nowrap;
-			padding: 0;
-			clear: both;
-			border-color: map-deep-get($config-global, "color", "border", "default");
-			border-right: 0;
-			margin: 1px;
-
-			li {
-				border-color: map-deep-get($config-global, "color", "border", "default");
-				padding: 0;
-				margin: 0;
-				float: left;
-				display: inline;
-				overflow: hidden;
-
-				a,
-				span {
-					margin: 0;
-					text-decoration: none;
-					padding: 0;
-					line-height: 1;
-					font-size: 1em;
-					font-weight: normal;
-					padding: 0.5em;
-					min-width: 1em;
-					display: block;
-				}
-
-				span.current,
-				a:hover,
-				a:focus {
-					background: map-deep-get($config-global, "color", "border", "default");
-					color: map-deep-get($config-global, "color", "foreground", "light");
-				}
-			}
-		}
-	}

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

@@ -2,11 +2,16 @@
  * Product loops
  */
 
+body[class*="woocommerce"] #page .woocommerce-products-header {
+	img {
+		display: block;
+	}
+}
+
 #woocommerce-wrapper,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
 
-
 	.products ul,
 	ul.products {
 		margin: 0;
@@ -17,9 +22,6 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
 
 		text-align: center;
 
-		.onsale {
-		}
-
 		.star-rating {
 			font-size: map-deep-get($config-global, "font", "size", "sm");
 			margin-left: auto;

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

@@ -1,5 +1,5 @@
 /**
- * Reviews
+ * Tabs
  */
 
 body[class*="woocommerce"] #page { // adding #content here to override default wc styles without !important
@@ -10,14 +10,15 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
 	.woocommerce-tabs {
 
 		ul.tabs {
+
 			padding-left: map-deep-get($config-global, "spacing", "horizontal");
 			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 
 			li {
 				background-color: map-deep-get($config-global, "color", "background", "light");
-				border-color: map-deep-get($config-woocommerce, "tab", "border", "color");
-				border-top-left-radius: map-deep-get($config-woocommerce, "tab", "border", "radius");
-				border-top-right-radius: map-deep-get($config-woocommerce, "tab", "border", "radius");
+				border-color: map-deep-get($config-woocommerce, "tabs", "border", "color");
+				border-top-left-radius: map-deep-get($config-woocommerce, "tabs", "border", "radius");
+				border-top-right-radius: map-deep-get($config-woocommerce, "tabs", "border", "radius");
 				padding-left: 0;
 				padding-right: 0;
 
@@ -29,13 +30,13 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
 					padding-bottom: #{0.5 * map-deep-get($config-woocommerce, "tabs", "padding")};
 
 					&:hover {
-						color: map-deep-get($config-global, "color", "foreground", "dark");
+						color: map-deep-get($config-global, "color", "primary", "hover");
 					}
 				}
 
 				&.active {
 					background-color: map-deep-get($config-global, "color", "background", "default");
-					border-color: map-deep-get($config-woocommerce, "tab", "border", "color");
+					border-color: map-deep-get($config-woocommerce, "tabs", "border", "color");
 					border-bottom-color: map-deep-get($config-global, "color", "background", "default");
 
 					a {
@@ -54,7 +55,7 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
 
 				&::before,
 				&::after {
-					border-color: map-deep-get($config-woocommerce, "tab", "border", "color");
+					border-color: map-deep-get($config-woocommerce, "tabs", "border", "color");
 				}
 
 				&::before {
@@ -67,11 +68,12 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
 			}
 
 			&::before {
-				border-bottom-color: map-deep-get($config-woocommerce, "tab", "border", "color");
+				border-bottom-color: map-deep-get($config-woocommerce, "tabs", "border", "color");
 			}
 		}
 
 		.panel {
+
 			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 
 			h2,

varia/sass/vendors/woocommerce/components/_products-header.scss

@@ -1,9 +0,0 @@
-/**
- * Product loops
- */
-
-body[class*="woocommerce"] #page .woocommerce-products-header {
-	img {
-		display: block;
-	}
-}

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

@@ -4,6 +4,18 @@
 
 body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
+	.woocommerce-message,
+	.woocommerce-info,
+	.woocommerce-success,
+	.woocommerce-error,
+	.woocommerce-warning {
+		padding: map-deep-get($config-global, "spacing", "unit") map-deep-get($config-global, "spacing", "vertical") map-deep-get($config-global, "spacing", "unit") #{2 * map-deep-get($config-global, "spacing", "vertical")};
+		margin-bottom: map-deep-get($config-global, "spacing", "vertical");
+		background-color: map-deep-get($config-global, "color", "background", "light");
+		color: map-deep-get($config-global, "color", "foreground", "dark");
+		border-top-color: map-deep-get($config-global, "color", "primary", "default");
+	}
+
 	.woocommerce-notice--message,
 	.woocommerce-notice--info {
 		color: map-deep-get($config-global, "color", "alert", "info");
@@ -21,18 +33,6 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		color: map-deep-get($config-global, "color", "alert", "warning");
 	}
 
-	.woocommerce-message,
-	.woocommerce-info,
-	.woocommerce-success,
-	.woocommerce-error,
-	.woocommerce-warning {
-		padding: map-deep-get($config-global, "spacing", "unit") map-deep-get($config-global, "spacing", "vertical") map-deep-get($config-global, "spacing", "unit") #{2 * map-deep-get($config-global, "spacing", "vertical")};
-		margin-bottom: map-deep-get($config-global, "spacing", "vertical");
-		background-color: map-deep-get($config-global, "color", "background", "light");
-		color: map-deep-get($config-global, "color", "foreground", "dark");
-		border-top-color: map-deep-get($config-global, "color", "primary", "default");
-	}
-
 	.woocommerce-message,
 	.woocommerce-info {
 		border-top-color: map-deep-get($config-global, "color", "alert", "info");

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

@@ -6,7 +6,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	.woocommerce-password-strength {
 		text-align: center;
 		font-weight: 600;
-		padding: #{0.5 * #{map-deep-get($config-global, "spacing", "base")}};
+		padding: #{0.5 * #{map-deep-get($config-woocommerce, "table", "padding")}};
 		font-size: map-deep-get($config-global, "font", "size", "sm");
 
 		&.strong {

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

@@ -3,7 +3,6 @@
  */
 
 body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
-
 	small.note {
 		color: map-deep-get($config-global, "color", "foreground", "light");
 		font-size: map-deep-get($config-global, "font", "size", "sm");

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

@@ -7,17 +7,17 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	.star-rating {
 
 		&::before {
-			color: map-deep-get($config-global, "color", "secondary", "default");
+			color: map-deep-get($config-woocommerce, "star-rating", "color");
 			content: "\53\53\53\53\53";
-			opacity: 0.5;
+			opacity: 0.4;
 		}
 
 		span {
-			color: map-deep-get($config-global, "color", "secondary", "default");
+			color: map-deep-get($config-woocommerce, "star-rating", "color");
 		}
 	}
 
 	p.stars a {
-		color: map-deep-get($config-global, "color", "secondary", "default");
+		color: map-deep-get($config-woocommerce, "star-rating", "color");
 	}
 }

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

@@ -7,47 +7,72 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	table.shop_table {
 
 		border-collapse: collapse;
-		border: 1px solid map-deep-get($config-global, "color", "border", "default");
+		border: map-deep-get($config-woocommerce, "table", "border", "width") solid map-deep-get($config-woocommerce, "table", "border", "color");
+		border-radius: map-deep-get($config-woocommerce, "table", "border", "radius");
 		margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 
+		th {
+			padding: map-deep-get($config-woocommerce, "table", "padding");
+			line-height: map-deep-get($config-global, "font", "line-height", "body");
+		}
+
 		td {
 			border-top: none;
+			padding: map-deep-get($config-woocommerce, "table", "padding");
 			word-break: break-word;
 		}
 
 		tr {
-			border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
+			border-bottom: map-deep-get($config-woocommerce, "table", "border", "width") solid map-deep-get($config-woocommerce, "table", "border", "color");
+		}
+
+		tfoot td,
+		tfoot th,
+		tbody th {
+			border-top-color: map-deep-get($config-woocommerce, "table", "border", "color");
 		}
 	}
 
 	table.shop_attributes {
-		border-top-color: map-deep-get($config-global, "color", "border", "default");
+
+		border-top-color: map-deep-get($config-woocommerce, "table", "border", "color");
 		border-top-style: solid;
 		margin-bottom: map-deep-get($config-global, "spacing", "vertical");
-		border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
+		border-bottom: map-deep-get($config-woocommerce, "table", "border", "width") solid map-deep-get($config-woocommerce, "table", "border", "color");
 
 		th {
-			padding: (0.5 * map-deep-get($config-global, "spacing", "unit"));
-			border-bottom-color: map-deep-get($config-global, "color", "border", "default");
+			padding: (0.5 * map-deep-get($config-woocommerce, "table", "padding"));
+			border-bottom-color: map-deep-get($config-woocommerce, "table", "border", "color");
 			border-bottom-style: solid;
 			line-height: map-deep-get($config-global, "font", "line-height", "body");
 		}
 
 		td {
 			font-style: inherit;
-			border-bottom-color: map-deep-get($config-global, "color", "border", "default");
+			border-bottom-color: map-deep-get($config-woocommerce, "table", "border", "color");
 			border-bottom-style: solid;
 			line-height: map-deep-get($config-global, "font", "line-height", "body");
+			padding: (0.5 * map-deep-get($config-woocommerce, "table", "padding"));
 
 			p {
 				margin: 0;
-				padding: map-deep-get($config-global, "spacing", "base") 0;
+				padding-top: (0.5 * map-deep-get($config-woocommerce, "table", "padding"));
+				padding-bottom: (0.5 * map-deep-get($config-woocommerce, "table", "padding"));
 			}
 		}
 
 		tr:nth-child(even) td,
 		tr:nth-child(even) th {
-			background: rgba(0, 0, 0, 0.025);
+			background: map-deep-get($config-global, "color", "background", "light");
+		}
+	}
+
+	table.my_account_orders {
+		font-size: map-deep-get($config-global, "font", "size", "sm");
+
+		th,
+		td {
+			padding: #{0.5 * map-deep-get($config-woocommerce, "table", "padding")};
 		}
 	}
 

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

@@ -3,27 +3,6 @@
  */
 body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
-	table.shop_table {
-		border-color: map-deep-get($config-global, "color", "border", "default");
-		border-radius: 3px;
-
-		th {
-			padding: map-deep-get($config-global, "spacing", "unit") map-deep-get($config-global, "spacing", "unit");
-			line-height: map-deep-get($config-global, "font", "line-height", "body");
-		}
-
-		td {
-			padding: map-deep-get($config-global, "spacing", "unit") map-deep-get($config-global, "spacing", "unit");
-			line-height: map-deep-get($config-global, "font", "line-height", "heading");
-		}
-
-		tfoot td,
-		tfoot th,
-		tbody th {
-			border-top-color: map-deep-get($config-global, "color", "border", "default");
-		}
-	}
-
 	td.product-remove {
 		height: map-deep-get($config-global, "font", "size", "lg");
 		width: map-deep-get($config-global, "font", "size", "lg");
@@ -70,154 +49,4 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		padding: map-deep-get($config-global, "spacing", "unit");
 	}
 
-	#add_payment_method {
-
-		table.cart {
-
-			.product-thumbnail {
-				min-width: map-deep-get($config-global, "spacing", "horizontal");
-			}
-
-			img {
-				width: #{2 * map-deep-get($config-global, "spacing", "vertical")};
-			}
-
-			td.actions .coupon .input-text {
-				border-color: map-deep-get($config-global, "color", "border", "default");
-				padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
-				margin: 0 map-deep-get($config-global, "spacing", "unit") 0 0;
-			}
-		}
-
-		.wc-proceed-to-checkout {
-
-			padding: map-deep-get($config-global, "spacing", "vertical") 0;
-
-			a.checkout-button {
-				margin-bottom: map-deep-get($config-global, "spacing", "vertical");
-				font-size: map-deep-get($config-global, "font", "size", "md");
-				padding: map-deep-get($config-global, "spacing", "unit");
-			}
-		}
-
-		.checkout {
-
-			.create-account small {
-				font-size: map-deep-get($config-global, "font", "size", "xs");
-				color: map-deep-get($config-global, "color", "foreground", "light");
-			}
-		}
-	}
-
-	#payment {
-		background: transparent;
-		border: 1px solid map-deep-get($config-global, "color", "border", "default");
-		border-radius: 0;
-
-		ul.payment_methods {
-
-			padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
-			border-bottom-color: map-deep-get($config-global, "color", "border", "default");
-
-			li {
-				line-height: map-deep-get($config-global, "font", "line-height", "body");
-
-				input {
-					margin-right: map-deep-get($config-global, "font", "line-height", "body");
-				}
-			}
-		}
-
-		div.form-row {
-			padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
-		}
-
-		div.payment_box {
-			padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
-			margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
-			margin-top: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
-			font-size: map-deep-get($config-global, "font", "size", "sm");
-			border-radius: 3px;
-			line-height: map-deep-get($config-global, "font", "line-height", "body");
-			background-color: map-deep-get($config-global, "color", "border", "default");
-			color: map-deep-get($config-global, "color", "foreground", "default");
-
-			input.input-text,
-			textarea {
-				border-color: map-deep-get($config-global, "color", "border", "default");
-				border-top-color: map-deep-get($config-global, "color", "border", "default");
-			}
-
-			::-webkit-input-placeholder {
-				color: map-deep-get($config-global, "color", "foreground", "light");
-			}
-
-			:-moz-placeholder {
-				color: map-deep-get($config-global, "color", "foreground", "light");
-			}
-
-			:-ms-input-placeholder {
-				color: map-deep-get($config-global, "color", "foreground", "light");
-			}
-
-			.woocommerce-SavedPaymentMethods {
-
-				.woocommerce-SavedPaymentMethods-tokenInput {
-					margin-right: map-deep-get($config-global, "spacing", "unit");
-				}
-			}
-
-			.wc-credit-card-form {
-				margin-top: map-deep-get($config-global, "spacing", "unit");
-			}
-
-			.wc-credit-card-form-card-number,
-			.wc-credit-card-form-card-expiry,
-			.wc-credit-card-form-card-cvc {
-				font-size: map-deep-get($config-global, "font", "size", "lg");
-				padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
-			}
-
-			span.help {
-				font-size: map-deep-get($config-global, "font", "size", "sm");
-				color: map-deep-get($config-global, "color", "foreground", "light");
-			}
-
-			.form-row {
-				margin: 0 0 map-deep-get($config-global, "spacing", "vertical");
-			}
-
-			p:last-child {
-				margin-bottom: 0;
-			}
-
-			&::before {
-				border-bottom-color: map-deep-get($config-global, "color", "border", "default"); /* arrow size / color */
-			}
-		}
-
-		.payment_method_paypal {
-
-			.about_paypal {
-				float: right;
-				line-height: 52px;
-				font-size: map-deep-get($config-global, "font", "size", "sm");
-			}
-
-			img {
-				max-height: 52px;
-				vertical-align: middle;
-			}
-		}
-	}
-
-	.woocommerce-terms-and-conditions {
-		border-color: map-deep-get($config-global, "color", "border", "default");
-	}
-
-	.woocommerce-invalid {
-		#terms {
-			outline-color: map-deep-get($config-global, "color", "alert", "error");
-		}
-	}
 }

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

@@ -4,13 +4,11 @@
 body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
 	.woocommerce-order {
-
 		h2 {
 			font-family: #{map-deep-get($config-global, "font", "family", "primary")};
 			font-size: map-deep-get($config-global, "font", "size", "lg");
 			font-weight: bold;
 		}
-
 	}
 
 	.woocommerce-order-overview.order_details {
@@ -18,14 +16,14 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		justify-content: space-between;
 		align-content: flex-start;
 		align-items: stretch;
-		border: 1px solid map-deep-get($config-global, "color", "border", "default");
+		border: 1px solid map-deep-get($config-woocommerce, "table", "border", "color");
 
 		li {
 			border: none;
 			font-family: #{map-deep-get($config-global, "font", "family", "primary")};
 			font-size: map-deep-get($config-global, "font", "size", "sm");
 			margin-right: 0;
-			padding: map-deep-get($config-global, "spacing", "unit");
+			padding: map-deep-get($config-woocommerce, "table", "padding");
 			text-transform: none;
 
 			&.email {
@@ -33,7 +31,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 			}
 
 			&:not(:last-child) {
-				border-right: 1px solid map-deep-get($config-global, "color", "border", "default");
+				border-right: 1px solid map-deep-get($config-woocommerce, "table", "border", "color");
 			}
 
 			strong {
@@ -63,8 +61,8 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	form.checkout_coupon,
 	form.login,
 	form.register {
-		border-color: map-deep-get($config-global, "color", "border", "default");
-		padding: map-deep-get($config-global, "spacing", "unit");
+		border-color: map-deep-get($config-woocommerce, "table", "border", "color");
+		padding: map-deep-get($config-woocommerce, "table", "padding");
 		margin-top: inherit;
 		margin-bottom: inherit;
 		text-align: left;
@@ -82,6 +80,158 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		border-bottom-width: 1px;
 	}
 
+	#add_payment_method {
+
+		table.cart {
+
+			.product-thumbnail {
+				min-width: map-deep-get($config-global, "spacing", "horizontal");
+			}
+
+			img {
+				width: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+			}
+
+			td.actions .coupon .input-text {
+				border-color: map-deep-get($config-global, "color", "border", "default");
+				padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
+				margin: 0 map-deep-get($config-global, "spacing", "unit") 0 0;
+			}
+		}
+
+		.wc-proceed-to-checkout {
+
+			padding: map-deep-get($config-global, "spacing", "vertical") 0;
+
+			a.checkout-button {
+				margin-bottom: map-deep-get($config-global, "spacing", "vertical");
+				font-size: map-deep-get($config-global, "font", "size", "md");
+				padding: map-deep-get($config-global, "spacing", "unit");
+			}
+		}
+
+		.checkout {
+
+			.create-account small {
+				font-size: map-deep-get($config-global, "font", "size", "xs");
+				color: map-deep-get($config-global, "color", "foreground", "light");
+			}
+		}
+	}
+
+	#payment {
+		background: transparent;
+		border: map-deep-get($config-woocommerce, "table", "border", "width") solid map-deep-get($config-woocommerce, "table", "border", "color");
+		border-radius: map-deep-get($config-woocommerce, "table", "border", "radius");
+
+		ul.payment_methods {
+
+			padding: map-deep-get($config-woocommerce, "table", "padding");
+			border-bottom-color: map-deep-get($config-woocommerce, "table", "border", "color");
+
+			li {
+				line-height: map-deep-get($config-global, "font", "line-height", "body");
+
+				input {
+					margin-right: map-deep-get($config-global, "font", "line-height", "body");
+				}
+			}
+		}
+
+		div.form-row {
+			padding: map-deep-get($config-woocommerce, "table", "padding");
+			margin-bottom: 0;
+		}
+
+		div.payment_box {
+			padding: #{0.5 * map-deep-get($config-woocommerce, "table", "padding")};
+			margin-bottom: #{0.5 * map-deep-get($config-woocommerce, "table", "padding")};
+			margin-top: #{0.5 * map-deep-get($config-woocommerce, "table", "padding")};
+			font-size: map-deep-get($config-global, "font", "size", "sm");
+			border-radius: map-deep-get($config-woocommerce, "table", "border", "radius");
+			line-height: map-deep-get($config-global, "font", "line-height", "body");
+			background-color: map-deep-get($config-global, "color", "background", "dark");
+			color: map-deep-get($config-global, "color", "foreground", "dark");
+
+			input.input-text,
+			textarea {
+				border-color: map-deep-get($config-woocommerce, "table", "border", "color");
+				border-top-color: map-deep-get($config-woocommerce, "table", "border", "color");
+			}
+
+			::-webkit-input-placeholder {
+				color: map-deep-get($config-global, "color", "foreground", "light");
+			}
+
+			:-moz-placeholder {
+				color: map-deep-get($config-global, "color", "foreground", "light");
+			}
+
+			:-ms-input-placeholder {
+				color: map-deep-get($config-global, "color", "foreground", "light");
+			}
+
+			.woocommerce-SavedPaymentMethods {
+
+				.woocommerce-SavedPaymentMethods-tokenInput {
+					margin-right: map-deep-get($config-global, "spacing", "unit");
+				}
+			}
+
+			.wc-credit-card-form {
+				margin-top: map-deep-get($config-woocommerce, "table", "padding");
+			}
+
+			.wc-credit-card-form-card-number,
+			.wc-credit-card-form-card-expiry,
+			.wc-credit-card-form-card-cvc {
+				font-size: map-deep-get($config-global, "font", "size", "lg");
+				padding: #{0.5 * map-deep-get($config-woocommerce, "table", "padding")};
+			}
+
+			span.help {
+				font-size: map-deep-get($config-global, "font", "size", "sm");
+				color: map-deep-get($config-global, "color", "foreground", "light");
+			}
+
+			.form-row {
+				margin: 0 0 map-deep-get($config-global, "spacing", "vertical");
+			}
+
+			p:last-child {
+				margin-bottom: 0;
+			}
+
+			&::before {
+				border-bottom-color: map-deep-get($config-global, "color", "background", "dark"); /* arrow size / color */
+			}
+		}
+
+		.payment_method_paypal {
+
+			.about_paypal {
+				float: right;
+				line-height: 52px;
+				font-size: map-deep-get($config-global, "font", "size", "sm");
+			}
+
+			img {
+				max-height: 52px;
+				vertical-align: middle;
+			}
+		}
+	}
+
+	.woocommerce-terms-and-conditions {
+		border-color: map-deep-get($config-woocommerce, "table", "border", "color");
+	}
+
+	.woocommerce-invalid {
+		#terms {
+			outline-color: map-deep-get($config-global, "color", "alert", "error");
+		}
+	}
+
 	.checkout h3 {
 		font-family: #{map-deep-get($config-global, "font", "family", "primary")};
 		font-size: map-deep-get($config-global, "font", "size", "lg");
@@ -89,7 +239,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	}
 
 	.woocommerce-terms-and-conditions {
-		border-color: map-deep-get($config-global, "color", "border", "default");
+		border-color: map-deep-get($config-woocommerce, "table", "border", "color");
 	}
 
 	.woocommerce-invalid {

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

@@ -2,8 +2,8 @@
  * Page Imports
  */
 
-@import "account";
 @import "cart";
 @import "checkout";
+@import "my-account";
 @import "products";
 @import "single-product";

varia/sass/vendors/woocommerce/pages/_account.scss → varia/sass/vendors/woocommerce/pages/_my-account.scss

@@ -26,31 +26,13 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		}
 	}
 
-	table.my_account_orders {
-		font-size: map-deep-get($config-global, "font", "size", "sm");
-
-		th,
-		td {
-			padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")} #{0.5 * map-deep-get($config-global, "spacing", "unit")};
-		}
-	}
-
 	.addresses .title h3 {
 		font-size: map-deep-get($config-global, "font", "size", "base")
 	}
 
-	.woocommerce {
-	}
-
 	.addresses .title {
 		.edit {
 			line-height: 1;
 		}
 	}
-
-	ol.commentlist.notes li.note {
-	}
-
-	ul.digital-downloads {
-	}
 }

varia/style-editor.css

@@ -1118,6 +1118,11 @@ table th,
 	z-index: 1;
 }
 
+.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;
@@ -1130,6 +1135,14 @@ table th,
 		/* Submenu display */
 	}
 	.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 {

varia/style-rtl.css

@@ -2484,6 +2484,11 @@ table th,
 	z-index: 1;
 }
 
+.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;
@@ -2496,6 +2501,14 @@ table th,
 		/* Submenu display */
 	}
 	.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 {

varia/style-woocommerce.css

@@ -5,7 +5,7 @@
  */
 /**
  * Abstracts
- * - Mixins, variables and functions
+ * - Functions and config
  */
 /* Sass Functions go here */
 /**
@@ -101,6 +101,15 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
 /**
  * Separator
  */
+/**
+ * WooCommerce Abstracts
+ */
+/**
+ * WooCommerce Variables
+ */
+/**
+ * Varia Mixins
+ */
 /**
  * Responsive breakpoints
  * - breakpoints values are defined in _config-global.scss
@@ -113,12 +122,6 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
-/**
- * WooCommerce Abstracts
- */
-/**
- * Abstracts Imports
- */
 /**
  * Varia Extends
  */
@@ -311,6 +314,18 @@ body[class*="woocommerce"] #page .woocommerce-breadcrumb a {
 /**
  * Notices
  */
+body[class*="woocommerce"] #page .woocommerce-message,
+body[class*="woocommerce"] #page .woocommerce-info,
+body[class*="woocommerce"] #page .woocommerce-success,
+body[class*="woocommerce"] #page .woocommerce-error,
+body[class*="woocommerce"] #page .woocommerce-warning {
+	padding: 16px 32px 16px 64px;
+	margin-bottom: 32px;
+	background-color: #FAFAFA;
+	color: #111111;
+	border-top-color: blue;
+}
+
 body[class*="woocommerce"] #page .woocommerce-notice--message,
 body[class*="woocommerce"] #page .woocommerce-notice--info {
 	color: skyblue;
@@ -328,18 +343,6 @@ body[class*="woocommerce"] #page .woocommerce-notice--warning {
 	color: gold;
 }
 
-body[class*="woocommerce"] #page .woocommerce-message,
-body[class*="woocommerce"] #page .woocommerce-info,
-body[class*="woocommerce"] #page .woocommerce-success,
-body[class*="woocommerce"] #page .woocommerce-error,
-body[class*="woocommerce"] #page .woocommerce-warning {
-	padding: 16px 32px 16px 64px;
-	margin-bottom: 32px;
-	background-color: #FAFAFA;
-	color: #111111;
-	border-top-color: blue;
-}
-
 body[class*="woocommerce"] #page .woocommerce-message,
 body[class*="woocommerce"] #page .woocommerce-info {
 	border-top-color: skyblue;
@@ -383,7 +386,7 @@ body[class*="woocommerce"] #page .woocommerce-warning:before {
 body[class*="woocommerce"] #page .woocommerce-password-strength {
 	text-align: center;
 	font-weight: 600;
-	padding: 0.5 * ;
+	padding: 0.5 * 16px;
 	font-size: 0.83333rem;
 }
 
@@ -439,17 +442,17 @@ body[class*="woocommerce"] #page small.note {
  * Star ratings
  */
 body[class*="woocommerce"] #page .star-rating::before {
-	color: red;
+	color: gold;
 	content: "\53\53\53\53\53";
-	opacity: 0.5;
+	opacity: 0.4;
 }
 
 body[class*="woocommerce"] #page .star-rating span {
-	color: red;
+	color: gold;
 }
 
 body[class*="woocommerce"] #page p.stars a {
-	color: red;
+	color: gold;
 }
 
 /**
@@ -458,11 +461,18 @@ body[class*="woocommerce"] #page p.stars a {
 body[class*="woocommerce"] #page table.shop_table {
 	border-collapse: collapse;
 	border: 1px solid #DDDDDD;
+	border-radius: 0;
 	margin-bottom: 32px;
 }
 
+body[class*="woocommerce"] #page table.shop_table th {
+	padding: 16px;
+	line-height: 1.78;
+}
+
 body[class*="woocommerce"] #page table.shop_table td {
 	border-top: none;
+	padding: 16px;
 	word-break: break-word;
 }
 
@@ -470,6 +480,12 @@ body[class*="woocommerce"] #page table.shop_table tr {
 	border-bottom: 1px solid #DDDDDD;
 }
 
+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.shop_attributes {
 	border-top-color: #DDDDDD;
 	border-top-style: solid;
@@ -489,16 +505,27 @@ body[class*="woocommerce"] #page table.shop_attributes td {
 	border-bottom-color: #DDDDDD;
 	border-bottom-style: solid;
 	line-height: 1.78;
+	padding: 8px;
 }
 
 body[class*="woocommerce"] #page table.shop_attributes td p {
 	margin: 0;
-	padding: 0;
+	padding-top: 8px;
+	padding-bottom: 8px;
 }
 
 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);
+	background: #FAFAFA;
+}
+
+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: 8px;
 }
 
 body[class*="woocommerce"] #page table td,
@@ -726,11 +753,8 @@ body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cart_tot
 }
 
 body[class*="woocommerce"] #page .cart-collaterals .shipping-calculator-button,
-body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .shipping-calculator-button {
-	margin-top: 16px;
-}
-
 body[class*="woocommerce"] #page .cart-collaterals .shipping-calculator-form,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .shipping-calculator-button,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .shipping-calculator-form {
 	margin-top: 16px;
 }
@@ -765,6 +789,13 @@ body[class*="woocommerce"] #page .main-navigation ul.product_list_widget li a {
 	padding: 0;
 }
 
+body[class*="woocommerce"] #page .main-navigation ul.cart_list li .quantity,
+body[class*="woocommerce"] #page .main-navigation ul.product_list_widget li .quantity,
+body[class*="woocommerce"] #page .main-navigation ul.cart_list li a:not(.remove),
+body[class*="woocommerce"] #page .main-navigation ul.product_list_widget li a:not(.remove) {
+	font-size: 1rem;
+}
+
 .woocommerce-cart #page .woocommerce-menu-item .sub-menu,
 .woocommerce-checkout #page .woocommerce-menu-item .sub-menu {
 	display: none;
@@ -814,52 +845,13 @@ body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers .svg-icon
 	vertical-align: middle;
 }
 
-sssnav.woocommerce-pagination {
-	text-align: center;
-}
-
-sssnav.woocommerce-pagination ul {
-	display: inline-block;
-	white-space: nowrap;
-	padding: 0;
-	clear: both;
-	border-color: #DDDDDD;
-	border-right: 0;
-	margin: 1px;
-}
-
-sssnav.woocommerce-pagination ul li {
-	border-color: #DDDDDD;
-	padding: 0;
-	margin: 0;
-	float: left;
-	display: inline;
-	overflow: hidden;
-}
-
-sssnav.woocommerce-pagination ul li a,
-sssnav.woocommerce-pagination ul li span {
-	margin: 0;
-	text-decoration: none;
-	padding: 0;
-	line-height: 1;
-	font-size: 1em;
-	font-weight: normal;
-	padding: 0.5em;
-	min-width: 1em;
-	display: block;
-}
-
-sssnav.woocommerce-pagination ul li span.current,
-sssnav.woocommerce-pagination ul li a:hover,
-sssnav.woocommerce-pagination ul li a:focus {
-	background: #DDDDDD;
-	color: #767676;
-}
-
 /**
  * Product loops
  */
+body[class*="woocommerce"] #page .woocommerce-products-header img {
+	display: block;
+}
+
 #woocommerce-wrapper .products ul,
 #woocommerce-wrapper ul.products,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells .products ul,
@@ -953,14 +945,7 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.p
 }
 
 /**
- * Product loops
- */
-body[class*="woocommerce"] #page .woocommerce-products-header img {
-	display: block;
-}
-
-/**
- * Reviews
+ * Tabs
  */
 body[class*="woocommerce"] #page {
 	/**
@@ -974,23 +959,24 @@ body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs {
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
-	border-color: #DDDDDD;
 	background-color: #FAFAFA;
-	border-radius: 9px 9px 0 0;
+	border-color: #DDDDDD;
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
 	padding-left: 0;
 	padding-right: 0;
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
+	color: #767676;
 	padding-left: 16px;
 	padding-right: 16px;
 	padding-top: 8px;
 	padding-bottom: 8px;
-	color: #767676;
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a:hover {
-	color: #111111;
+	color: indigo;
 }
 
 body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active {
@@ -1337,73 +1323,9 @@ body[class*="woocommerce"] #page .woocommerce-order-details > *:empty {
 /**
  * Page Imports
  */
-/**
- * Account page
- */
-body[class*="woocommerce"] #page .woocommerce-MyAccount-navigation {
-	width: 20%;
-}
-
-body[class*="woocommerce"] #page .woocommerce-MyAccount-navigation ul li a {
-	line-height: 1.125;
-	display: inline-table;
-}
-
-body[class*="woocommerce"] #page .woocommerce-MyAccount-content {
-	width: calc(80% - 16px);
-}
-
-body[class*="woocommerce"] #page .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
-	display: none;
-}
-
-body[class*="woocommerce"] #page .woocommerce-MyAccount-content fieldset {
-	border: 1px solid #DDDDDD;
-	padding: 16px;
-	border-radius: 3px;
-}
-
-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: 8px 8px;
-}
-
-body[class*="woocommerce"] #page .addresses .title h3 {
-	font-size: 1rem;
-}
-
-body[class*="woocommerce"] #page .addresses .title .edit {
-	line-height: 1;
-}
-
 /**
  * Cart page
  */
-body[class*="woocommerce"] #page table.shop_table {
-	border-color: #DDDDDD;
-	border-radius: 3px;
-}
-
-body[class*="woocommerce"] #page table.shop_table th {
-	padding: 16px 16px;
-	line-height: 1.78;
-}
-
-body[class*="woocommerce"] #page table.shop_table td {
-	padding: 16px 16px;
-	line-height: 1.125;
-}
-
-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 td.product-remove {
 	height: 1.44rem;
 	width: 1.44rem;
@@ -1447,6 +1369,77 @@ body[class*="woocommerce"] #page table.cart td.actions .input-text {
 	padding: 16px;
 }
 
+/**
+ * Checkout page
+ */
+body[class*="woocommerce"] #page .woocommerce-order h2 {
+	font-family: sans-serif;
+	font-size: 1.44rem;
+	font-weight: bold;
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details {
+	display: flex;
+	justify-content: space-between;
+	align-content: flex-start;
+	align-items: stretch;
+	border: 1px solid #DDDDDD;
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li {
+	border: none;
+	font-family: sans-serif;
+	font-size: 0.83333rem;
+	margin-right: 0;
+	padding: 16px;
+	text-transform: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li.email {
+	word-break: break-word;
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li:not(:last-child) {
+	border-right: 1px solid #DDDDDD;
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li strong {
+	font-family: serif;
+	font-size: 1.2rem;
+	line-height: 1.125;
+}
+
+body[class*="woocommerce"] #page .woocommerce-order-overview.order_details:before, body[class*="woocommerce"] #page .woocommerce-order-overview.order_details:after {
+	content: none !important;
+	display: none;
+}
+
+body[class*="woocommerce"] #page .woocommerce-form-coupon-toggle + .checkout_coupon {
+	margin-bottom: 32px;
+}
+
+body[class*="woocommerce"] #page form.checkout_coupon,
+body[class*="woocommerce"] #page form.login,
+body[class*="woocommerce"] #page form.register {
+	border-color: #DDDDDD;
+	padding: 16px;
+	margin-top: inherit;
+	margin-bottom: inherit;
+	text-align: left;
+	border-radius: 0;
+}
+
+body[class*="woocommerce"] #page ul.order_details {
+	padding-left: 0;
+}
+
+body[class*="woocommerce"] #page .woocommerce-customer-details address {
+	border-radius: 0;
+	border-color: #DDDDDD;
+	border-right-width: 1px;
+	border-bottom-width: 1px;
+}
+
 body[class*="woocommerce"] #page #add_payment_method table.cart .product-thumbnail {
 	min-width: 16px;
 }
@@ -1483,7 +1476,7 @@ body[class*="woocommerce"] #page #payment {
 }
 
 body[class*="woocommerce"] #page #payment ul.payment_methods {
-	padding: 8px;
+	padding: 16px;
 	border-bottom-color: #DDDDDD;
 }
 
@@ -1496,7 +1489,8 @@ body[class*="woocommerce"] #page #payment ul.payment_methods li input {
 }
 
 body[class*="woocommerce"] #page #payment div.form-row {
-	padding: 8px;
+	padding: 16px;
+	margin-bottom: 0;
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box {
@@ -1504,10 +1498,10 @@ body[class*="woocommerce"] #page #payment div.payment_box {
 	margin-bottom: 8px;
 	margin-top: 8px;
 	font-size: 0.83333rem;
-	border-radius: 3px;
+	border-radius: 0;
 	line-height: 1.78;
 	background-color: #DDDDDD;
-	color: #444444;
+	color: #111111;
 }
 
 body[class*="woocommerce"] #page #payment div.payment_box input.input-text,
@@ -1580,89 +1574,52 @@ body[class*="woocommerce"] #page .woocommerce-invalid #terms {
 	outline-color: salmon;
 }
 
-/**
- * Checkout page
- */
-body[class*="woocommerce"] #page .woocommerce-order h2 {
+body[class*="woocommerce"] #page .checkout h3 {
 	font-family: sans-serif;
 	font-size: 1.44rem;
 	font-weight: bold;
 }
 
-body[class*="woocommerce"] #page .woocommerce-order-overview.order_details {
-	display: flex;
-	justify-content: space-between;
-	align-content: flex-start;
-	align-items: stretch;
-	border: 1px solid #DDDDDD;
-}
-
-body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li {
-	border: none;
-	font-family: sans-serif;
-	font-size: 0.83333rem;
-	margin-right: 0;
-	padding: 16px;
-	text-transform: none;
+body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
+	border-color: #DDDDDD;
 }
 
-body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li.email {
-	word-break: break-word;
+body[class*="woocommerce"] #page .woocommerce-invalid #terms {
+	outline-color: salmon;
 }
 
-body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li:not(:last-child) {
-	border-right: 1px solid #DDDDDD;
+/**
+ * Account page
+ */
+body[class*="woocommerce"] #page .woocommerce-MyAccount-navigation {
+	width: 20%;
 }
 
-body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li strong {
-	font-family: serif;
-	font-size: 1.2rem;
+body[class*="woocommerce"] #page .woocommerce-MyAccount-navigation ul li a {
 	line-height: 1.125;
+	display: inline-table;
 }
 
-body[class*="woocommerce"] #page .woocommerce-order-overview.order_details:before, body[class*="woocommerce"] #page .woocommerce-order-overview.order_details:after {
-	content: none !important;
-	display: none;
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content {
+	width: calc(80% - 16px);
 }
 
-body[class*="woocommerce"] #page .woocommerce-form-coupon-toggle + .checkout_coupon {
-	margin-bottom: 32px;
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty {
+	display: none;
 }
 
-body[class*="woocommerce"] #page form.checkout_coupon,
-body[class*="woocommerce"] #page form.login,
-body[class*="woocommerce"] #page form.register {
-	border-color: #DDDDDD;
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content fieldset {
+	border: 1px solid #DDDDDD;
 	padding: 16px;
-	margin-top: inherit;
-	margin-bottom: inherit;
-	text-align: left;
-	border-radius: 0;
-}
-
-body[class*="woocommerce"] #page ul.order_details {
-	padding-left: 0;
-}
-
-body[class*="woocommerce"] #page .woocommerce-customer-details address {
-	border-radius: 0;
-	border-color: #DDDDDD;
-	border-right-width: 1px;
-	border-bottom-width: 1px;
-}
-
-body[class*="woocommerce"] #page .checkout h3 {
-	font-family: sans-serif;
-	font-size: 1.44rem;
-	font-weight: bold;
+	border-radius: 3px;
 }
 
-body[class*="woocommerce"] #page .woocommerce-terms-and-conditions {
-	border-color: #DDDDDD;
+body[class*="woocommerce"] #page .addresses .title h3 {
+	font-size: 1rem;
 }
 
-body[class*="woocommerce"] #page .woocommerce-invalid #terms {
-	outline-color: salmon;
+body[class*="woocommerce"] #page .addresses .title .edit {
+	line-height: 1;
 }
 
 /**

varia/style-woocommerce.scss

@@ -5,16 +5,20 @@
 
 /**
  * Abstracts
- * - Mixins, variables and functions
+ * - Functions and config
  */
 @import "sass/abstracts/functions";
 @import "sass/abstracts/config-global";
-@import "sass/abstracts/mixins";
 
 /**
  * WooCommerce Abstracts
  */
-@import "sass/vendors/woocommerce/abstracts/imports";
+@import "sass/vendors/woocommerce/abstracts/config-woocommerce";
+
+/**
+ * Varia Mixins
+ */
+@import "sass/abstracts/mixins";
 
 /**
  * Varia Extends

varia/style.css

@@ -2501,6 +2501,11 @@ table th,
 	z-index: 1;
 }
 
+.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;
@@ -2513,6 +2518,14 @@ table th,
 		/* Submenu display */
 	}
 	.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 {