finalized styling of checkout order informations page

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -343,7 +343,8 @@ header[role="banner"]{
       body:not(.path-home) & {
         padding:0.5em 1em;
       }
-      body.path-blabla & {
+      body.path-blabla &,
+      body.path-checkout & {
         color: #fff;
         background-color: $color-blabla;
       }
@@ -1497,6 +1498,37 @@ article.card{
       order:2;
       background-color: $color-webshowroom;
       padding: 1em;
+      label,
+      legend{
+        color: #fff;
+      }
+      fieldset{
+        border:none;
+        margin:0; padding:0;
+        legend{
+          font-size: 1.5em;
+          font-weight: 600;
+          margin-bottom: 0.5em;
+        }
+      }
+      $lw:10em;
+      .form-item{
+        margin:0 0 0.5em 0;
+      }
+      label{
+        display: inline-block;
+        font-weight: bold;
+        min-width: $lw;
+      }
+      input[type="text"]{
+        width:20em;
+      }
+      .form-item-payment-information-billing-information-address-0-address-address-line2{
+        padding-left:$lw + 0.25em;
+      }
+      .form-item-payment-information-billing-information-copy-to-address-book{
+        display: none;
+      }
     }
     .layout-region-checkout-secondary{
       // disable default style
@@ -1512,18 +1544,83 @@ article.card{
       >h3{display:none;}
       #edit-order-summary{
         background-color: $color-base;
+        color:#fff;
         padding:1em;
+        .view-commerce-checkout-order-summary{
+          display: flex;
+          flex-flow: row nowrap;
+          justify-content: space-between;
+          align-items: flex-end;
+        }
+        .field--name-product-id{
+          .field--name-title{
+            font-size: 2.5em;
+            font-weight: 800;
+          }
+          .field--name-body{
+
+          }
+        }
+        .field--name-title{
+          font-size: 1.5em;
+          font-weight: 600;
+        }
+        p{
+          margin:0;
+        }
       }
       #edit-coupon-redemption{
         background-color: $color-showrooms;
         padding:1em;
-        input[type="text"]{
-          width: 5em;
+        >.form-wrapper{
+          display: flex;
+          flex-flow: row;
+          align-items: center;
+          .form-item{
+            margin:0 0.5em 0 0;
+            label{
+              color: #fff;
+              font-size: 1.5em;
+              font-weight: 600;
+              margin-right: 0.5em;
+            }
+            input[type="text"]{
+              width: 7em;
+            }
+          }
+          input[type="submit"]{
+            background-color: #fff;
+            color: $color-showrooms;
+            border: none;
+            margin:0;
+            padding:0.1em 0.7em;
+            box-sizing: content-box;
+            height:2em;
+            font-weight: 800;
+            border-radius: 5px;
+          }
         }
       }
     }
     .layout-region-checkout-footer{
+      // disable default style
+      float: none;
+      width: 100%;
+      padding: 0;
+      // apply custom style
       order: 3;
+      #edit-actions{
+        text-align: right;
+      }
+      input#edit-actions-next{
+        background-color: $color-blabla;
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        padding: 0.2em 0.4em 0.3em;
+        font-weight: 600;
+        font-size: 1.323em;
+      }
     }
   }
 }