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

This is falcon v3.1.2

_dev/css/theme/components/404/_errors.scss

@@ -0,0 +1,35 @@
+#products,
+#pagenotfound {
+  #main {
+    .page-header {
+      margin: 2rem 0 3rem;
+    }
+
+    .page-content {
+      margin-bottom: 10rem;
+    }
+  }
+
+  .page-not-found {
+    max-width: 570px;
+    padding: 1rem;
+    margin: 0 auto;
+    font-size: $font-size-sm;
+    color: $gray-600;
+    background: #fff;
+
+    h4 {
+      margin: 0.5rem 0 1rem;
+      font-size: $font-size-base;
+      font-weight: 700;
+    }
+
+    .search-widget {
+      float: none;
+
+      input {
+        width: 100%;
+      }
+    }
+  }
+}

_dev/css/theme/components/404/_index.scss

@@ -0,0 +1 @@
+@import "errors";

_dev/css/theme/components/_index.scss

@@ -0,0 +1,13 @@
+@import "product/index";
+@import "customer/index";
+@import "cart/index";
+@import "cms/index";
+@import "menu/index";
+@import "404/index";
+@import "newsletter/index";
+@import "homeslider/index";
+@import "search/index";
+@import "page-loader/index";
+@import "links-list/index";
+@import "lazyload/index";
+@import "alert-toast/index";

_dev/css/theme/components/alert-toast/_alert-toast-stack.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+
+
+.alert-toast-stack {
+  position: fixed;
+  right: map.get($spacers, 3);
+  top: map.get($spacers, 3);
+  width: rem-calc(250px);
+  display: block;
+  z-index: 101;
+}

_dev/css/theme/components/alert-toast/_alert-toast.scss

@@ -0,0 +1,43 @@
+@use "sass:map";
+
+.alert-toast {
+  $self: &;
+
+  @include font-size($font-size-sm);
+  margin-bottom: map.get($spacers, 3);
+  opacity: 0;
+  transform: translateX(100%);
+  box-shadow: $box-shadow;
+  border-radius: $border-radius;
+  transition: 0.4s ease-in-out;
+
+  &__content {
+    padding: map.get($spacers, 2) map.get($spacers, 3);
+  }
+
+  &.show {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  &--info {
+    color: color-yiq($primary);
+    background: $primary;
+  }
+
+  &--danger {
+    color: color-yiq($danger);
+    background: $danger;
+  }
+
+  &--warning {
+    color: color-yiq($warning);
+    background: $warning;
+  }
+
+  &--success {
+    color: color-yiq($success);
+    background: $success;
+  }
+}
+

_dev/css/theme/components/alert-toast/_index.scss

@@ -0,0 +1,2 @@
+@import "alert-toast-stack";
+@import "alert-toast";

_dev/css/theme/components/cart/_blockcart.scss

@@ -0,0 +1,11 @@
+.blockcart {
+  &__dropdown {
+    width: rem-calc(320px);
+    min-width: inherit;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
+  }
+}

_dev/css/theme/components/cart/_cart-dropdown.scss

@@ -0,0 +1,25 @@
+@use "sass:map";
+
+.cart-dropdown {
+  &__content {
+    padding: map.get($spacers, 2) map.get($spacers, 3) map.get($spacers, 3);
+  }
+
+  &__products {
+    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+    max-height: rem-calc(400px);
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &__close {
+    font-size: rem-calc(22px);
+    color: $gray-600;
+
+    &:hover,
+    &:focus {
+      color: $black;
+    }
+  }
+}

_dev/css/theme/components/cart/_cart-loader.scss

@@ -0,0 +1,16 @@
+.cart-loader {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: rgba($white, 0.5);
+
+  .cart-loading & {
+    display: flex;
+  }
+}

_dev/css/theme/components/cart/_cart-products.scss

@@ -0,0 +1,26 @@
+@use "sass:map";
+
+.cart-products {
+  display: flex;
+  padding-bottom: map.get($spacers, 3);
+
+  &:not(:first-child) {
+    padding-top: map.get($spacers, 3);
+    border-top: 1px solid $border-color;
+  }
+
+  &__thumb {
+    @include custom-col(rem-calc(80px));
+    padding-right: map.get($spacers, 2);
+  }
+
+  &__desc {
+    flex: 1 1;
+    padding-right: map.get($spacers, 2);
+  }
+
+  &__remove {
+    flex: 0 0;
+  }
+
+}

_dev/css/theme/components/cart/_cart-summary-line.scss

@@ -0,0 +1,23 @@
+@use "sass:map";
+
+.cart-summary-line {
+  display: flex;
+  justify-content: space-between;
+  @include font-size($font-size-base);
+
+  &:not(:last-child) {
+    margin-bottom: map.get($spacers, 2);
+  }
+
+  &.cart-total {
+    @include font-size($font-size-lg);
+  }
+
+  .label {
+    margin-right: map.get($spacers, 2);
+  }
+
+  .value {
+    font-weight: 600;
+  }
+}

_dev/css/theme/components/cart/_index.scss

@@ -0,0 +1,5 @@
+@import "blockcart";
+@import "cart-dropdown";
+@import "cart-products";
+@import "cart-loader";
+@import "cart-summary-line";

_dev/css/theme/components/cms/_cms-content.scss

@@ -0,0 +1,19 @@
+.cms-content {
+  ol,
+  ul {
+    padding-left: .75rem;
+    list-style: inherit;
+    list-style-position: inside;
+  }
+
+  ol {
+    padding-left: rem-calc(30px);
+    list-style: decimal;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+}

_dev/css/theme/components/cms/_index.scss

@@ -0,0 +1 @@
+@import "cms-content";

_dev/css/theme/components/customer/_address.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+
+.address {
+  &__header {
+    background-color: transparent;
+  }
+
+  &__body {
+    line-height: 1.75;
+
+    address {
+      margin: 0;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    padding: 0;
+
+    a {
+      @include make-col(6);
+      padding: map.get($spacers, 2);
+      color: $gray-900;
+      text-align: center;
+
+      &:first-child {
+        border-right: 1px solid $card-border-color;
+      }
+
+      @include hover-focus() {
+        text-decoration: none;
+        background: $gray-200;
+      }
+    }
+  }
+}

_dev/css/theme/components/customer/_customer-links.scss

@@ -0,0 +1,83 @@
+@use "sass:map";
+
+.customer-links {
+  margin: 0 0 map.get($spacers, 3);
+  @include media-breakpoint-up(lg) {
+    margin: 0;
+  }
+
+  .link-item {
+    display: flex;
+    align-items: center;
+  }
+
+  &__list {
+    @include media-breakpoint-down(md) {
+      display: flex;
+      flex-wrap: nowrap;
+
+      margin: rem-calc(20px) 0 0;
+      overflow-x: scroll;
+      overflow-y: hidden;
+      white-space: nowrap;
+      -webkit-overflow-scrolling: touch;
+      -ms-overflow-style: -ms-autohiding-scrollbar;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  a {
+    display: block;
+    flex: 0 0;
+    max-width: inherit;
+    padding: map.get($spacers, 2);
+    font-weight: 700;
+    color: $gray-800;
+    white-space: nowrap;
+    border-radius: $border-radius;
+    @include font-size($font-size-base);
+
+    @include media-breakpoint-up(lg) {
+      white-space: normal;
+    }
+
+    @include hover-focus() {
+      color: $primary;
+      text-decoration: none;
+    }
+
+    i {
+      margin-right: map.get($spacers, 1);
+      color: $primary;
+      @include font-size(26px);
+      @include media-breakpoint-up(md) {
+        margin-right: map.get($spacers, 2);
+      }
+    }
+
+    &.active {
+      color: #fff;
+      background: $primary;
+
+      &::after {
+        display: block;
+      }
+
+      i {
+        color: inherit;
+      }
+    }
+  }
+
+  &__logout {
+    text-align: center;
+
+    &::after,
+    &::before {
+      display: none;
+    }
+  }
+}

_dev/css/theme/components/customer/_index.scss

@@ -0,0 +1,5 @@
+@import "address";
+@import "customer-links";
+@import "user-form";
+@import "product-table";
+@import "product-table-line";

_dev/css/theme/components/customer/_product-table-line.scss

@@ -0,0 +1,163 @@
+@use "sass:map";
+
+.product-line {
+  $self: &;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &--first {
+    border-top: 1px solid $border-color;
+  }
+
+  @include media-breakpoint-up(md) {
+    display: table-row;
+    padding: 0;
+    padding: map.get($spacers, 2) 0;
+    border-bottom: 1px solid $border-color;
+  }
+
+  #{$self} {
+    // NESTING TO OVERRIDE BOOTSTRAP TABLE STYLES
+    &__cell {
+      padding: map.get($spacers, 2);
+      @include media-breakpoint-up(sm) {
+        padding: $table-cell-padding;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  &__qty-input {
+    .bootstrap-touchspin {
+      margin: 0 auto;
+    }
+  }
+
+  &__cell {
+
+    &--img {
+      width: rem-calc(120px);
+      @include media-breakpoint-down(sm) {
+        order: -3;
+        width: auto;
+        @include custom-col(rem-calc(90px));
+      }
+    }
+
+    &--prod {
+      @include media-breakpoint-down(sm) {
+        order: -2;
+        @include custom-col(calc(100% - #{rem-calc(90px)}));
+      }
+    }
+
+    &--delete {
+      @include media-breakpoint-down(sm) {
+        order: -1;
+        @include custom-col(rem-calc(40px));
+      }
+    }
+
+    &--price,
+    &--total,
+    &--qty {
+      @include media-breakpoint-down(sm) {
+        @include make-col(4);
+      }
+    }
+
+    &--total {
+      @include media-breakpoint-down(sm) {
+        text-align: right;
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      &[data-title] {
+        &::before {
+          @include font-size($font-size-xs);
+          display: block;
+          margin: 0 0 map.get($spacers, 1);
+          content: attr(data-title);
+        }
+      }
+    }
+  }
+
+  &__price {
+    @include font-size($font-size-base);
+  }
+
+  &__checkbox-block {
+    position: static;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      cursor: pointer;
+      content: "";
+    }
+  }
+
+  &--return {
+    #{$self} {
+      &__cell {
+        @include media-breakpoint-down(sm) {
+          &--checkbox {
+            order: -3;
+            @include custom-col(rem-calc(40px));
+          }
+
+          &--img {
+            @include custom-col(rem-calc(70px));
+            padding-left: 0;
+          }
+
+          &--prod {
+            @include custom-col(calc(100% - #{rem-calc(110px)}));
+          }
+
+          &--qty,
+          &--price {
+            @include custom-col(50%);
+          }
+        }
+      }
+    }
+  }
+
+  &--extended {
+    #{$self} {
+      &__cell {
+        @include media-breakpoint-down(sm) {
+          &--price,
+          &--qty,
+          &--returned,
+          &--total {
+            @include custom-col(25%);
+          }
+        }
+        @include media-breakpoint-down(xs) {
+          &--price,
+          &--qty,
+          &--returned,
+          &--total {
+            @include custom-col(50%);
+          }
+
+          &--qty {
+            text-align: right;
+          }
+        }
+      }
+    }
+  }
+}

_dev/css/theme/components/customer/_product-table.scss

@@ -0,0 +1,26 @@
+.product-table {
+  margin: 0;
+  overflow: hidden;
+
+  &__head {
+    @include media-breakpoint-down(sm) {
+      display: none;
+    }
+
+    th {
+      border-top: 0;
+    }
+  }
+
+  &__row {
+    @include media-breakpoint-up(sm) {
+      margin-top: -1px;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    tbody {
+      display: block;
+    }
+  }
+}

_dev/css/theme/components/customer/_user-form.scss

@@ -0,0 +1,8 @@
+.user-form {
+  max-width: 800px;
+  margin: 0 auto;
+
+  &--sm {
+    max-width: 600px;
+  }
+}

_dev/css/theme/components/homeslider/_homeslider.scss

@@ -0,0 +1,49 @@
+@use "sass:map";
+
+.homeslider {
+
+  &__img {
+    background: $gray-100;
+  }
+
+  &__list {
+    margin: 0;
+  }
+
+  &__slider {
+    position: relative;
+  }
+
+  &__caption {
+    position: absolute;
+    top: 50%;
+    left: 80px;
+    transform: translateY(-50%);
+  }
+
+  &__desc {
+    * {
+      color: $gray-800;
+    }
+  }
+
+
+  &__arrow {
+    top: 0;
+    bottom: 0;
+    padding: 0 map.get($spacers, 3);
+    line-height: 1;
+
+    > * {
+      font-size: rem-calc(40px);
+    }
+
+    &--prev {
+      left: 0;
+    }
+
+    &--next {
+      right: 0;
+    }
+  }
+}

_dev/css/theme/components/homeslider/_index.scss

@@ -0,0 +1 @@
+@import "homeslider";

_dev/css/theme/components/lazyload/_index.scss

@@ -0,0 +1 @@
+@import "lazyload";

_dev/css/theme/components/lazyload/_lazyload.scss

@@ -0,0 +1,5 @@
+img.lazyload {
+  &:not(.loaded) {
+    background: $gray-200;
+  }
+}

_dev/css/theme/components/links-list/_index.scss

@@ -0,0 +1 @@
+@import "links-list";

_dev/css/theme/components/links-list/_links-list.scss

@@ -0,0 +1,23 @@
+@use "sass:map";
+
+.links-list {
+  padding: 0 0 map.get($spacers, 4);
+  margin: 0;
+  @include media-breakpoint-up(lg) {
+    padding: 0;
+  }
+
+
+  &__elem {
+    &:not(:last-child) {
+      margin: 0 0 map.get($spacers, 2);
+    }
+  }
+
+  &__link {
+    color: $gray-600;
+    @include hover-focus() {
+      color: $gray-900;
+    }
+  }
+}

_dev/css/theme/components/menu/_index.scss

@@ -0,0 +1 @@
+@import "mainmenu";

_dev/css/theme/components/menu/_mainmenu.scss

@@ -0,0 +1,143 @@
+@use "sass:map";
+
+.main-menu {
+  $self: &;
+
+  &__item-header {
+    display: flex;
+    align-items: center;
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+
+  &__dropdown {
+    margin: -#{$modal-inner-padding} -#{$modal-inner-padding} map.get($spacers, 3);
+    border-bottom: 1px solid $border-color;
+    @include media-breakpoint-up(md) {
+      position: relative;
+      display: flex;
+      align-items: center;
+      margin: 0;
+      border: 0;
+    }
+  }
+
+  &__list {
+    @include media-breakpoint-up(md) {
+      margin: 0 0 map.get($spacers, 2);
+
+      &--1 {
+        display: flex;
+        flex-wrap: wrap;
+      }
+    }
+  }
+
+  &__item-link {
+    display: block;
+    padding: $modal-inner-padding;
+
+    @include media-breakpoint-up(md) {
+      display: inline-block;
+      padding: 0;
+    }
+
+    &--top {
+      @include font-size($font-size-lg);
+      font-weight: 700;
+      color: $gray-900;
+
+      @include hover-focus() {
+        text-decoration: none;
+      }
+
+      @include media-breakpoint-up(md) {
+        padding: map.get($spacers, 3) map.get($spacers, 4);
+      }
+    }
+
+    &--sub {
+      color: $gray-900;
+      @include media-breakpoint-up(md) {
+        margin: 0 0 map.get($spacers, 1);
+      }
+    }
+
+    &--1 {
+      font-weight: 700;
+    }
+
+    &--2 {
+      padding-left: #{$modal-inner-padding + rem-calc(map.get($spacers, 2))};
+      @include media-breakpoint-up(md) {
+        padding: 0;
+      }
+    }
+
+    &--3 {
+      padding-left: #{$modal-inner-padding + rem-calc(map.get($spacers, 3))};
+      @include media-breakpoint-up(md) {
+        padding-left: map.get($spacers, 2);
+      }
+    }
+
+    &--4 {
+      padding-left: #{$modal-inner-padding + rem-calc(map.get($spacers, 4))};
+      @include media-breakpoint-up(md) {
+        padding-left: map.get($spacers, 2);
+      }
+    }
+
+  }
+
+  &__item {
+    border-top: 1px solid $border-color;
+
+    &--top {
+      &:first-child {
+        border: 0;
+      }
+    }
+
+    @include media-breakpoint-up(md) {
+      border: 0;
+    }
+
+    &--active {
+      @include media-breakpoint-up(md) {
+        #{$self} {
+          &__sub {
+            visibility: visible;
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      }
+    }
+
+    &--1 {
+      @include media-breakpoint-up(md) {
+        @include custom-col-padded(25%);
+      }
+    }
+  }
+
+  &__sub {
+    background: $gray-100;
+    @include media-breakpoint-up(md) {
+      position: absolute;
+      top: 100%;
+      right: 0;
+      left: 0;
+      z-index: 100;
+      padding: map.get($spacers, 4) map.get($spacers, 4) map.get($spacers, 3);
+      visibility: hidden;
+      background: $white;
+      box-shadow: $box-shadow;
+      opacity: 0;
+      transition: 0.2s ease-in;
+      transform: translateY(5px);
+    }
+  }
+}

_dev/css/theme/components/newsletter/_index.scss

@@ -0,0 +1 @@
+@import "newsletter";

_dev/css/theme/components/newsletter/_newsletter.scss

@@ -0,0 +1,6 @@
+#left-column {
+  .block_newsletter {
+    padding: 1.563rem 1.25rem;
+    margin-bottom: 1.563rem;
+  }
+}

_dev/css/theme/components/page-loader/_index.scss

@@ -0,0 +1 @@
+@import "page-loader";

_dev/css/theme/components/page-loader/_page-loader.scss

@@ -0,0 +1,16 @@
+.page-loader {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba($white, 0.5);
+
+  .page-loader-active & {
+    display: flex;
+  }
+}

_dev/css/theme/components/product/_comments-pagination.scss

@@ -0,0 +1,15 @@
+.comments-pagination {
+  ul {
+    @extend .pagination;
+    margin: 0;
+  }
+
+  li {
+    @extend .page-item;
+  }
+
+  span {
+    @extend .page-link;
+    cursor: pointer;
+  }
+}

_dev/css/theme/components/product/_customization-modal.scss

@@ -0,0 +1,25 @@
+.customization-modal {
+  .modal-content {
+    border: 1px solid $gray-200;
+    border-radius: 0;
+
+    .modal-body {
+      padding-top: 0;
+
+      .product-customization-line {
+        .label {
+          font-weight: 600;
+          text-align: right;
+        }
+        padding-top: 0.9375rem;
+        padding-bottom: 0.9375rem;
+        border-bottom: 1px solid $gray-200;
+
+        &:last-child {
+          padding-bottom: 0;
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+}

_dev/css/theme/components/product/_index.scss

@@ -0,0 +1,8 @@
+@import "product-miniature";
+@import "product-flags";
+@import "customization-modal";
+@import "price";
+@import "stars";
+@import "products-list";
+@import "product-slider";
+@import "comments-pagination";

_dev/css/theme/components/product/_price.scss

@@ -0,0 +1,19 @@
+.price {
+  @include font-size($font-size-lg);
+  font-weight: 700;
+  color: $primary;
+
+  &--regular {
+    font-weight: 400;
+    color: $text-muted;
+    text-decoration: line-through;
+  }
+
+  &--lg {
+    @include font-size($h2-font-size);
+  }
+
+  &--sm {
+    @include font-size($font-size-base);
+  }
+}

_dev/css/theme/components/product/_product-flags.scss

@@ -0,0 +1,41 @@
+@use "sass:map";
+
+.product-flags {
+  top: 0;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+  pointer-events: none;
+
+  &__flag {
+    width: fit-content;
+    padding: map.get($spacers, 1) map.get($spacers, 2);
+    margin-bottom: map.get($spacers, 2);
+    font-size: $font-size-sm;
+    font-weight: 700;
+    line-height: 1.35;
+    color: #fff;
+    pointer-events: auto;
+    background: $primary;
+
+    &--online-only {
+      position: absolute;
+      right: 0;
+      z-index: 1;
+      margin-top: 0;
+    }
+
+    &--discount-percentage,
+    &--discount-amount,
+    &--discount {
+      background-color: $secondary;
+    }
+
+    &--on-sale {
+      order: -1;
+      width: 100%;
+      text-align: center;
+      background: $secondary;
+    }
+  }
+}

_dev/css/theme/components/product/_product-miniature.scss

@@ -0,0 +1,53 @@
+@use "sass:map";
+
+.product-miniature {
+  $self: &;
+
+  &__functional-btn {
+    position: absolute;
+    right: map.get($spacers, 2);
+    bottom: map.get($spacers, 2);
+    z-index: 2;
+    width: 1.7em;
+    height: 1.7em;
+    padding: 0;
+    line-height: 1.7em;
+    border: 0;
+    @include font-size(20px);
+
+    &--top {
+      top: map.get($spacers, 2);
+      bottom: auto;
+    }
+  }
+
+  &__functional-btn-icon {
+      font-size: inherit;
+      line-height: inherit;
+  }
+
+  &__pricing {
+    margin: 0 0 map.get($spacers, 4);
+  }
+
+  &__title {
+    $number-of-lines: 2;
+    $line-height: 1.3;
+    height: #{$number-of-lines * $line-height}em;
+    overflow: hidden;
+
+    line-height: $line-height;
+  }
+
+  &--smaller {
+    .price,
+    #{$self}__title {
+      @include font-size(15px);
+    }
+
+    #{$self}__pricing {
+      margin: 0;
+    }
+
+  }
+}

_dev/css/theme/components/product/_product-slider.scss

@@ -0,0 +1,17 @@
+.product-slider {
+  margin-right: -5px;
+  margin-left: -5px;
+  @include media-breakpoint-up(sm) {
+    margin-right: -10px;
+    margin-left: -10px;
+  }
+
+  &__item {
+    padding-right: 5px;
+    padding-left: 5px;
+    @include media-breakpoint-up(sm) {
+      padding-right: 10px;
+      padding-left: 10px;
+    }
+  }
+}

_dev/css/theme/components/product/_products-list.scss

@@ -0,0 +1,31 @@
+@use "sass:math";
+
+.products-list {
+  &__block {
+    padding: 0 math.div($grid-gutter-width, 2);
+    margin-bottom: $grid-gutter-width;
+
+    &--grid {
+      @include make-col(6);
+
+      .layout-left-column & {
+        @include media-breakpoint-up(lg) {
+          @include make-col(4);
+        }
+      }
+
+      .layout-full-width & {
+        @include media-breakpoint-up(md) {
+          @include make-col(4);
+        }
+        @include media-breakpoint-up(xl) {
+          @include make-col(3);
+        }
+      }
+    }
+
+    &--list {
+      @include make-col(12);
+    }
+  }
+}

_dev/css/theme/components/product/_stars.scss

@@ -0,0 +1,66 @@
+@use "sass:map";
+
+.star-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+
+  .star,
+  .star-on,
+  .star-hover {
+    display: block;
+    flex: auto;
+    width: 20px;
+    height: 20px;
+    margin-left: 3px;
+    background: url("../img/icons/star_gray.svg") no-repeat 0 0 transparent;
+    background-size: 20px;
+  }
+
+  .star-on,
+  .star-hover {
+    background-image: url("../img/icons/star_active.svg");
+  }
+
+  .star-hover {
+    cursor: pointer;
+  }
+
+  .small-stars & {
+    .star,
+    .star-on,
+    .star-hover {
+      width: 16px;
+      height: 16px;
+      margin-left: 2px;
+      background-size: 16px;
+    }
+  }
+}
+
+.grade-stars {
+  position: relative;
+  display: inline-block;
+  min-width: 120px;
+  height: 20px;
+
+  &.small-stars {
+    min-width: 70px;
+    height: 16px;
+  }
+}
+
+.product-list-reviews {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: map.get($spacers, 2);
+  visibility: hidden;
+  background: rgba($white, 0.4);
+
+  .grade-stars {
+    display: block;
+  }
+}

_dev/css/theme/components/search/_index.scss

@@ -0,0 +1,2 @@
+@import "search-form";
+@import "search-result";

_dev/css/theme/components/search/_search-form.scss

@@ -0,0 +1,54 @@
+@use "sass:map";
+
+.search-form {
+  position: relative;
+  max-width: rem-calc(620px);
+  margin: 0 auto;
+
+  &__form-group {
+    position: relative;
+    @include media-breakpoint-up(md) {
+      .search-result-open & {
+        z-index: 101;
+      }
+    }
+  }
+
+  &__input {
+    height: $search-input-height;
+    padding: 0 rem-calc(70px) 0 rem-calc(30px);
+    line-height: $search-input-height;
+    color: $gray-900;
+    border-width: 1px;
+    border-radius: 99em;
+
+    &:focus {
+      background: $gray-100;
+      box-shadow: none;
+    }
+
+  }
+
+  &__btn {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0 map.get($spacers, 3);
+    line-height: 1;
+    color: $primary;
+  }
+}
+
+.search-modal {
+  .modal-body {
+    padding-top: rem-calc(40px);
+  }
+
+  .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: rem-calc(7px) rem-calc(10px);
+  }
+}

_dev/css/theme/components/search/_search-result.scss

@@ -0,0 +1,53 @@
+@use "sass:math";
+@use "sass:map";
+
+.js-search-result {
+  @include media-breakpoint-up(md) {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    left: 0;
+    z-index: 99;
+    padding: #{math.div($search-input-height, 2) + #{map.get($spacers, 2)}} map.get($spacers, 3) map.get($spacers, 3);
+    margin-top: -#{math.div($search-input-height, 2)};
+    background: $white;
+    border: 1px solid $border-color;
+    border-radius: 0 0 $border-radius $border-radius;
+  }
+}
+
+.search-result {
+  @include media-breakpoint-up(md) {
+    padding: map.get($spacers, 3);
+  }
+
+  &__products {
+    margin: map.get($spacers, 3) -#{map.get($spacers, 2)} 0;
+
+    .products-list__block {
+      padding: 0 map.get($spacers, 2);
+      margin: 0 0 map.get($spacers, 3);
+      @include make-col(6);
+      @include media-breakpoint-up(md) {
+        @include make-col(4);
+      }
+    }
+  }
+
+  &__bottom {
+    /* stylelint-disable */
+    position: sticky;
+    /* stylelint-enable */
+    right: 0;
+    bottom: -#{$modal-inner-padding};
+    left: 0;
+    z-index: 1;
+    padding: map.get($spacers, 2) map.get($spacers, 3);
+    margin: 0 -#{map.get($spacers, 2)};
+    background: #fff;
+    @include media-breakpoint-up(md) {
+      padding: 0;
+      margin: 0;
+    }
+  }
+}