From f50d383f2a9d0b360ff8080a7972ab5943d2c48a Mon Sep 17 00:00:00 2001
From: Nestor Soriano <konamiman@konamiman.com>
Date: Mon, 23 Nov 2020 12:24:07 +0100
Subject: [PATCH] Adjust CSS for the "Shop" title in the shop page

- Un-bolden title, align left, add horizontal rule to be in line
  with the theme.
- Adjust margins/paddings depending on the screen width.
---
 assets/css/twenty-twenty-one.scss | 43 ++++++++++++++++++++++++-------
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/assets/css/twenty-twenty-one.scss b/assets/css/twenty-twenty-one.scss
index 8739e014f2d..15eebc4c7f2 100644
--- a/assets/css/twenty-twenty-one.scss
+++ b/assets/css/twenty-twenty-one.scss
@@ -341,11 +341,6 @@ a.button {
 /**
  * Shop page
  */
-.woocommerce-products-header__title.page-title {
-	font-size: 3rem;
-	text-align: center;
-}
-
 .woocommerce-result-count,
 .woocommerce-ordering {
 	margin: 0 0 1rem;
@@ -2146,6 +2141,12 @@ a.reset_variations {
 		.woocommerce-ordering {
 			float: left;
 			clear: both;
+			margin-top: 0px;
+		}
+
+		.woocommerce-result-count {
+			margin-top: 0px;
+			margin-bottom: 20px;
 		}
 	}
 }
@@ -2436,10 +2437,6 @@ a.reset_variations {
 	/**
 	* Shop page
 	*/
-	.woocommerce-products-header__title.page-title {
-		font-size: 4.2rem;
-		font-weight: 800;
-	}
 
 	.woocommerce-pagination {
 
@@ -2609,3 +2606,31 @@ a.reset_variations {
 		}
 	}
 }
+
+@media only screen and (max-width: 768px) {
+
+	.woocommerce-products-header {
+		border-bottom: none !important;
+		padding-bottom: 0px;
+		margin-bottom: 0 !important;
+	}
+}
+
+@media only screen and (min-width: 600px) {
+
+	.woocommerce-products-header {
+		padding-bottom: 1.5vw;
+	}
+
+	.woocommerce-ordering,
+	.woocommerce-result-count {
+		margin-top: 0 !important;
+	}
+}
+
+@media only screen and (min-width: 690px) {
+
+	.woocommerce-products-header {
+		border-bottom: 3px solid var(--global--color-border);
+	}
+}