Make product cards fully clickable

static/css/cart.css

@@ -26,13 +26,17 @@
 }
 
 .cart-item {
+    position: relative;
     display: grid;
     grid-template-columns: 230px minmax(0, 1fr);
     gap: 34px;
     align-items: start;
+    cursor: pointer;
 }
 
 .cart-item__media {
+    position: relative;
+    z-index: 1;
     display: block;
     width: 100%;
     aspect-ratio: 1.55 / 1;
@@ -40,6 +44,13 @@
     background: rgba(99, 118, 141, 0.12);
 }
 
+.cart-item__overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: block;
+}
+
 .cart-item__media img {
     display: block;
     width: 100%;
@@ -61,6 +72,8 @@
 }
 
 .cart-item__title {
+    position: relative;
+    z-index: 1;
     display: inline-block;
     color: var(--dark);
     font-size: 25px;
@@ -81,6 +94,8 @@
 }
 
 .cart-item__controls {
+    position: relative;
+    z-index: 3;
     display: flex;
     align-items: center;
     justify-content: space-between;

static/css/catalog.css

@@ -200,9 +200,11 @@ aside {
 }
 
 .item-card {
+    position: relative;
     min-width: 0;
     border: 1px solid rgba(54, 33, 62, 0.14);
     background: #ffffff;
+    cursor: pointer;
     transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
 }
 
@@ -213,6 +215,15 @@ aside {
 }
 
 .item-card-media-link {
+    position: relative;
+    z-index: 1;
+    display: block;
+}
+
+.item-card-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
     display: block;
 }
 
@@ -259,6 +270,8 @@ aside {
 }
 
 .item-card-favorite-form {
+    position: relative;
+    z-index: 3;
     flex: 0 0 auto;
 }
 
@@ -296,10 +309,14 @@ aside {
 }
 
 .item-card-favorite-button--login {
+    position: relative;
+    z-index: 3;
     text-decoration: none;
 }
 
 .item-card-title-link {
+    position: relative;
+    z-index: 1;
     display: block;
 }
 
@@ -688,13 +705,24 @@ aside {
 
 /* Sidebar mini-cards */
 .sidebar-mini-card {
+    position: relative;
     display: flex;
     gap: 10px;
     align-items: flex-start;
     margin-bottom: 12px;
+    cursor: pointer;
+}
+
+.sidebar-mini-card__overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: block;
 }
 
 .sidebar-mini-card__img-link {
+    position: relative;
+    z-index: 1;
     flex: 0 0 52px;
     width: 52px;
     height: 52px;
@@ -719,6 +747,8 @@ aside {
 }
 
 .sidebar-mini-card__name {
+    position: relative;
+    z-index: 1;
     color: #36213e;
     font-size: 15px;
     line-height: 1.2;

static/css/index.css

@@ -507,6 +507,7 @@
     flex-direction: column;
     background: #ffffff;
     border: 1px solid rgba(54, 33, 62, 0.12);
+    cursor: pointer;
     transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
 }
 
@@ -517,6 +518,8 @@
 }
 
 .product-media {
+    position: relative;
+    z-index: 1;
     min-height: 0;
     flex: 1 1 auto;
     display: block;
@@ -524,6 +527,13 @@
     background: rgba(99, 118, 141, 0.1);
 }
 
+.product-card-link {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: block;
+}
+
 .product-media img {
     display: block;
     width: 100%;
@@ -545,7 +555,7 @@
 
 .product-actions {
     position: absolute;
-    z-index: 2;
+    z-index: 3;
     top: 18px;
     left: 18px;
     display: flex;
@@ -604,6 +614,8 @@
 }
 
 .product-name {
+    position: relative;
+    z-index: 1;
     min-height: 52px;
     margin-top: 8px;
     display: -webkit-box;