feat(main): Add base theme: This is the falcon theme out of the box.

_dev/css/checkout/_index.scss

@@ -0,0 +1 @@
+@import "components/index";

_dev/css/checkout/components/_index.scss

@@ -0,0 +1,2 @@
+@import "product-table/index";
+@import "checkout/index";

_dev/css/checkout/components/checkout/_checkout-content.scss

@@ -0,0 +1,97 @@
+.checkout-step {
+  &:not(:first-child) {
+    border-top: $card-border-width solid $card-border-color;
+  }
+
+  &__header {
+    border-bottom: 0;
+  }
+
+  .step-number {
+    display: inline-block;
+  }
+
+  .content {
+    border-top: $card-border-width solid $card-border-color;
+  }
+
+  .not-allowed {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .content,
+  .done,
+  .step-edit {
+    display: none;
+  }
+
+  &.-unreachable {
+    .step-title {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  &.-current {
+    .step-title {
+      cursor: default;
+    }
+
+    .content {
+      display: block;
+    }
+  }
+
+  &.-reachable.-complete {
+    .done {
+      display: inline-block;
+    }
+
+    .content {
+      display: none;
+    }
+  }
+
+  &.-current.-reachable.-complete {
+    .done,
+    .step-edit {
+      display: none;
+    }
+
+    .step-number {
+      display: inline-block;
+    }
+
+    .content {
+      display: block;
+    }
+  }
+}
+
+.js-payment-binary {
+  display: none;
+
+  .accept-cgv {
+    display: none;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      content: "";
+    }
+
+    .accept-cgv {
+      display: block;
+    }
+  }
+}

_dev/css/checkout/components/checkout/_checkout-option-block.scss

@@ -0,0 +1,14 @@
+.checkout-option-block {
+  position: relative;
+
+  > input {
+    position: absolute;
+    left: -99999em;
+  }
+
+  &.selected {
+    .card {
+      border-color: $primary;
+    }
+  }
+}

_dev/css/checkout/components/checkout/_checkout-option.scss

@@ -0,0 +1,13 @@
+@use "sass:map";
+
+.checkout-option {
+  &__col {
+    &--thumb {
+      @include  custom-col(rem-calc(50px));
+
+      @include  media-breakpoint-up(sm) {
+        @include  custom-col(rem-calc(60px));
+      }
+    }
+  }
+}

_dev/css/checkout/components/checkout/_index.scss

@@ -0,0 +1,3 @@
+@import "checkout-content";
+@import "checkout-option";
+@import "checkout-option-block";

_dev/css/checkout/components/product-table/_index.scss

@@ -0,0 +1 @@
+@import "product-line-grid";

_dev/css/checkout/components/product-table/_product-line-grid.scss

@@ -0,0 +1,77 @@
+@use "sass:map";
+
+.product-line-grid {
+  align-items: center;
+
+  &:not(:last-child) {
+    padding-bottom: map.get($spacers, 3);
+    margin-bottom: map.get($spacers, 3);
+    border-bottom: 1px solid $border-color;
+  }
+
+  &__row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: 0 -#{map.get($spacers, 2)};
+    @include media-breakpoint-up(md) {
+      flex-wrap: nowrap;
+    }
+  }
+
+  &__block {
+    padding: 0 rem-calc(10px);
+
+    &--image {
+      align-self: flex-start;
+      @include custom-col(80px);
+      order: -3;
+      @include media-breakpoint-up(md) {
+        align-self: center;
+        @include custom-col(100px);
+      }
+    }
+
+    &--prod {
+      order: -2;
+      @include custom-col(calc(100% - #{rem-calc(80px)} - #{rem-calc(50px)}));
+      @include media-breakpoint-up(md) {
+        flex: 1 1 auto;
+        max-width: inherit;
+      }
+    }
+
+    &--qty {
+      @include make-col(6);
+      margin: rem-calc(15px) 0 0;
+      @include media-breakpoint-up(md) {
+        margin: 0;
+        @include custom-col(rem-calc(130px));
+      }
+    }
+
+    &--total {
+      @include make-col(6);
+      margin: rem-calc(15px) 0 0;
+      text-align: right;
+      @include media-breakpoint-up(md) {
+        margin: 0;
+        text-align: center;
+        @include custom-col(rem-calc(120px));
+      }
+      @include media-breakpoint-up(xl) {
+        @include custom-col(rem-calc(150px));
+      }
+    }
+
+    &--delete {
+      @include custom-col(rem-calc(50px));
+      text-align: center;
+      @include media-breakpoint-down(sm) {
+        align-self: flex-start;
+        order: -1;
+        padding-top: rem-calc(5px);
+      }
+    }
+  }
+}