diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
index 16a2bc5..f70f9b5 100644
--- a/erpnext/public/scss/shopping_cart.scss
+++ b/erpnext/public/scss/shopping_cart.scss
@@ -1,5 +1,9 @@
 @import "frappe/public/scss/desk/variables";
-@import "frappe/public/scss/mixins";
+@import "frappe/public/scss/desk/mixins";
+
+body.product-page {
+	background: var(--gray-50);
+}
 
 .carousel-control {
 	height: 42px;
@@ -50,6 +54,11 @@
 		height: 360px;
 		align-items: center;
 		justify-content: center;
+
+		&:hover {
+			box-shadow: 0px 16px 60px rgba(0, 0, 0, 0.08), 0px 8px 30px -20px rgba(0, 0, 0, 0.04);
+			transition: box-shadow 400ms;
+		}
 	}
 
 	// .card-body {
@@ -81,6 +90,10 @@
 		display: -webkit-box;
 		-webkit-line-clamp: 6;
 		-webkit-box-orient: vertical;
+
+		p {
+			margin-bottom: 0.5rem;
+		}
 	}
 
 	.product-category {
@@ -141,7 +154,7 @@
 	}
 }
 
-.product-page {
+.product-container {
 	@include card($padding: var(--padding-md));
 	min-height: 70vh;
 
diff --git a/erpnext/stock/doctype/item/item.py b/erpnext/stock/doctype/item/item.py
index 86ce5cc..47f2614 100644
--- a/erpnext/stock/doctype/item/item.py
+++ b/erpnext/stock/doctype/item/item.py
@@ -317,6 +317,7 @@
 		context.search_link = '/product_search'
 
 		context.parents = get_parent_item_groups(self.item_group)
+		context.body_class = "product-page"
 
 		self.set_variant_context(context)
 		self.set_attribute_context(context)
diff --git a/erpnext/templates/generators/item/item.html b/erpnext/templates/generators/item/item.html
index 55c45e2..a456179 100644
--- a/erpnext/templates/generators/item/item.html
+++ b/erpnext/templates/generators/item/item.html
@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block page_content %}
-<div class="product-page">
+<div class="product-container">
 	{% from "erpnext/templates/includes/macros.html" import product_image %}
 	<div class="item-content">
 		<div class="product-page-content" itemscope itemtype="http://schema.org/Product">