Varia: Improve cart layout and button styles.

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

@@ -15,6 +15,10 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		#toggle-cart {
 			display: inline-block;
 			margin: 0;
+
+			.svg-icon {
+				vertical-align: top;
+			}
 		}
 
 		// Checkbox hack
@@ -49,8 +53,25 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 			}
 		}
 
+		@include media(mobile-only) {
+
+			.woocommerce-menu-container {
+
+				background-color: map-deep-get($config-woocommerce, "mini-cart", "color", "background");
+				color: map-deep-get($config-woocommerce, "mini-cart", "color", "text");
+				padding-top: #{map-deep-get($config-header, "main-nav", "link-padding")};
+
+				a,
+				a:link,
+				a:visited {
+					color: currentColor;
+				}
+			}
+		}
+
 		.woocommerce-cart-link {
 
+			display: none;
 			text-decoration: none;
 			line-height: 1;
 
@@ -71,6 +92,11 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 				float: left;
 				height: #{map-deep-get($config-header, "main-nav", "font", "size")};
 				width: #{map-deep-get($config-header, "main-nav", "font", "size")};
+				vertical-align: top;
+			}
+
+			@include media(mobile) {
+				display: inline-block;
 			}
 		}
 
@@ -79,7 +105,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 			background-color: map-deep-get($config-woocommerce, "mini-cart", "color", "background");
 			color: map-deep-get($config-woocommerce, "mini-cart", "color", "text");
 			max-width: 100%;
-			padding: #{0.5 * map-deep-get($config-header, "main-nav", "link-padding")} 0;
+			padding: 0;
 
 			@include media(mobile) {
 				max-width: #{20 * map-deep-get($config-global, "spacing", "horizontal")};

varia/style-woocommerce-rtl.css

@@ -764,7 +764,21 @@ body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked +
 	}
 }
 
+@media only screen and (max-width: 559px) {
+	body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container {
+		background-color: white;
+		color: #444444;
+		padding-top: 16px;
+	}
+	body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container a,
+	body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container a:link,
+	body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container a:visited {
+		color: currentColor;
+	}
+}
+
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link {
+	display: none;
 	text-decoration: none;
 	line-height: 1;
 }
@@ -786,13 +800,20 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .svg-ic
 	float: right;
 	height: 1.2rem;
 	width: 1.2rem;
+	vertical-align: middle;
+}
+
+@media only screen and (min-width: 560px) {
+	body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link {
+		display: inline-block;
+	}
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
 	background-color: white;
 	color: #444444;
 	max-width: 100%;
-	padding: 8px 0;
+	padding: 0;
 }
 
 @media only screen and (min-width: 560px) {

varia/style-woocommerce.css

@@ -737,6 +737,10 @@ body[class*="woocommerce"] #page .main-navigation #toggle-cart {
 	margin: 0;
 }
 
+body[class*="woocommerce"] #page .main-navigation #toggle-cart .svg-icon {
+	vertical-align: top;
+}
+
 body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked ~ div {
 	display: block;
 }
@@ -764,7 +768,21 @@ body[class*="woocommerce"] #page .main-navigation #woocommerce-toggle:checked +
 	}
 }
 
+@media only screen and (max-width: 559px) {
+	body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container {
+		background-color: white;
+		color: #444444;
+		padding-top: 16px;
+	}
+	body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container a,
+	body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container a:link,
+	body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container a:visited {
+		color: currentColor;
+	}
+}
+
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link {
+	display: none;
 	text-decoration: none;
 	line-height: 1;
 }
@@ -786,13 +804,20 @@ body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link .svg-ic
 	float: left;
 	height: 1.2rem;
 	width: 1.2rem;
+	vertical-align: top;
+}
+
+@media only screen and (min-width: 560px) {
+	body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-link {
+		display: inline-block;
+	}
 }
 
 body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
 	background-color: white;
 	color: #444444;
 	max-width: 100%;
-	padding: 8px 0;
+	padding: 0;
 }
 
 @media only screen and (min-width: 560px) {