cart: enhance order summary styles

src/components/OrderSummary/OrderSummary.module.css

@@ -2,24 +2,10 @@
   padding: 16px !important;
 }
 
-/* Enhanced responsive order summary */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .orderSummary {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
-}
-
 .orderSummary {
   transition: all 0.3s ease;
 }
 
-/* Enhanced responsive order summary */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .orderSummary {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
-}
-
 .summaryRow {
   display: flex;
   justify-content: space-between;
@@ -27,60 +13,15 @@
   font-size: 16px;
 }
 
-/* Enhanced responsive summary rows */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .summaryRow {
-    padding: 12px 0;
-    font-size: 16px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .summaryRow {
-    padding: 16px 0;
-    font-size: 18px;
-  }
-}
-
 .summaryDivider {
   margin: 8px 0 !important;
 }
 
-/* Enhanced responsive summary divider */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .summaryDivider {
-    margin: 20px 0 !important;
-  }
-}
-
-@media (min-width: 1025px) {
-  .summaryDivider {
-    margin: 24px 0 !important;
-  }
-}
-
 .totalRow {
   font-weight: bold;
   font-size: 16px;
 }
 
-/* Enhanced responsive total row */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .totalRow {
-    font-size: 18px;
-    padding-top: 20px;
-    margin-top: 12px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .totalRow {
-    font-size: 20px;
-    padding-top: 24px;
-    margin-top: 16px;
-  }
-}
-
 .desktopOrderSummary {
   background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
   border: 1px solid rgba(0, 0, 0, 0.08);
@@ -102,13 +43,13 @@
   margin-top: 16px;
 }
 
-/* Enhanced responsive animations */
-@media (prefers-reduced-motion: no-preference) {
-  .orderSummary {
-    animation: fadeInUp 0.8s ease-out;
-  }
+/* Enhanced responsive focus states */
+.orderSummary:focus {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
 }
 
+/* Enhanced responsive animations */
 @keyframes fadeInUp {
   from {
     opacity: 0;
@@ -120,27 +61,61 @@
   }
 }
 
-/* Enhanced responsive focus states */
-.orderSummary:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+/* ===== MEDIA QUERIES ===== */
+
+/* Tablet styles (769px - 1024px) */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .orderSummary {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .summaryRow {
+    padding: 12px 0;
+    font-size: 16px;
+  }
+
+  .summaryDivider {
+    margin: 20px 0 !important;
+  }
+
+  .totalRow {
+    font-size: 18px;
+    padding-top: 20px;
+    margin-top: 12px;
+  }
 }
 
+/* Desktop styles (1025px+) */
+@media (min-width: 1025px) {
+  .summaryRow {
+    padding: 8px 0;
+    font-size: 18px;
+  }
+
+  .summaryDivider {
+    margin: 0 !important;
+  }
+
+  .totalRow {
+    font-size: 20px;
+  }
+}
+
+/* Focus states for larger screens */
 @media (min-width: 768px) {
   .orderSummary:focus {
     outline-offset: 4px;
   }
 }
 
-/* Enhanced responsive print styles */
-@media print {
+/* Reduced motion preferences */
+@media (prefers-reduced-motion: no-preference) {
   .orderSummary {
-    box-shadow: none !important;
-    border: 1px solid #ccc !important;
+    animation: fadeInUp 0.8s ease-out;
   }
 }
 
-/* Enhanced responsive hover effects */
+/* Hover effects for devices that support hover */
 @media (hover: hover) {
   .orderSummary:hover {
     transform: translateY(-2px);
@@ -154,3 +129,11 @@
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
   }
 }
+
+/* Print styles */
+@media print {
+  .orderSummary {
+    box-shadow: none !important;
+    border: 1px solid #ccc !important;
+  }
+}