first commit

themes/ayon__/_dev/css/components/alert.scss

@@ -0,0 +1,49 @@
+.ps-alert-error {
+  margin-bottom: 0;
+}
+
+.ps-alert-error,
+.ps-alert-success {
+  .item {
+    align-items: center;
+    border: 2px $brand-danger solid;
+    display: flex;
+    background-color: $brand-danger;
+    margin-bottom: 1rem;
+
+    i {
+      border: 15px $brand-danger solid;
+      display: flex;
+
+      svg {
+        background-color: $brand-danger;
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    p {
+      background-color: $body-bg;
+      margin: 0!important;
+      padding: 18px 20px 18px 20px;
+      width: 100%;
+    }
+  }
+}
+
+.ps-alert-success {
+  padding: 0.25rem 0.25rem 2.75rem 0.25rem;
+
+  .item {
+    border-color: $brand-success;
+    background-color: $brand-success;
+
+    i {
+      border-color: $brand-success;
+
+      svg {
+        background-color: $brand-success;
+      }
+    }
+  }
+}

themes/ayon__/_dev/css/components/animsition.css

@@ -0,0 +1,193 @@
+.animsition,
+.animsition-overlay {
+  position: relative;
+  opacity: 0;
+  animation-fill-mode: both;
+}
+
+.animsition-overlay-slide {
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+}
+
+/* loading option */
+.roy-loader {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+
+.roy-loader .icon_loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.roy-loader .icon_loader span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border-width: 2px;
+  border-style: solid;
+  margin-right: 4px;
+  transform: translateZ(0);
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-duration: 0.6s;
+  animation-name: icon_loader;
+}
+
+.roy-loader .icon_loader span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.roy-loader .icon_loader span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+@keyframes icon_loader {
+  0% {
+    transform: translateY(0);
+  }
+  25% {
+    transform: translateY(3px);
+  }
+  75% {
+    transform: translateY(-3px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.fade-in {
+  animation-name: fade-in;
+}
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.fade-out {
+  animation-name: fade-out;
+}
+@keyframes fade-in-up {
+  0% {
+    transform: translateY(500px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.fade-in-up {
+  animation-name: fade-in-up;
+}
+@keyframes fade-out-up {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-500px);
+    opacity: 0;
+  }
+}
+.fade-out-up {
+  animation-name: fade-out-up;
+}
+@keyframes fade-in-up-sm {
+  0% {
+    transform: translateY(100px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.fade-in-up-sm {
+  animation-name: fade-in-up-sm;
+}
+@keyframes fade-out-up-sm {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-100px);
+    opacity: 0;
+  }
+}
+.fade-out-up-sm {
+  animation-name: fade-out-up-sm;
+}
+@keyframes fade-in-down {
+  0% {
+    transform: translateY(-500px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.fade-in-down {
+  animation-name: fade-in-down;
+}
+@keyframes fade-out-down {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(500px);
+    opacity: 0;
+  }
+}
+.fade-out-down {
+  animation-name: fade-out-down;
+}
+@keyframes fade-in-down-sm {
+  0% {
+    transform: translateY(-100px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.fade-in-down-sm {
+  animation-name: fade-in-down-sm;
+}
+@keyframes fade-out-down-sm {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100px);
+    opacity: 0;
+  }
+}
+.fade-out-down-sm {
+  animation-name: fade-out-down-sm;
+}/*# sourceMappingURL=animsition.css.map */

themes/ayon__/_dev/css/components/animsition.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["animsition.scss","animsition.css"],"names":[],"mappings":"AAAA;;EAEE,kBAAA;EACA,UAAA;EAEQ,yBAAA;ACCV;;ADCA;EACE,eAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;ACEF;;ADAA,mBAAA;AACA;EACE,WAAA;EACA,aAAA;EACA,eAAA;EACA,MAAA;EACA,OAAA;EACA,aAAA;ACGF;;ADDA;EACE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;ACIF;;ADFA;EACE,qBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,iBAAA;EAEQ,wBAAA;EAEA,mCAAA;EAEA,iCAAA;EAEA,wBAAA;EAEA,2BAAA;ACKV;;ADFA;EACI,qBAAA;ACKJ;;ADHA;EACI,qBAAA;ACMJ;ADeA;EACE;IAEU,wBAAA;ECMV;EDJA;IAEU,0BAAA;ECMV;EDJA;IAEU,2BAAA;ECMV;EDJA;IAEU,wBAAA;ECMV;AACF;ADQA;EACE;IACE,UAAA;ECEF;EDAA;IACE,UAAA;ECEF;AACF;ADEA;EAEU,uBAAA;ACAV;ADcA;EACE;IACE,UAAA;ECHF;EDKA;IACE,UAAA;ECHF;AACF;ADOA;EAEU,wBAAA;ACLV;ADmBA;EACE;IAEU,4BAAA;IACR,UAAA;ECJF;EDMA;IAEU,wBAAA;IACR,UAAA;ECJF;AACF;ADQA;EAEU,0BAAA;ACNV;ADwBA;EACE;IAEU,wBAAA;IACR,UAAA;ECTF;EDWA;IAEU,6BAAA;IACR,UAAA;ECTF;AACF;ADaA;EAEU,2BAAA;ACXV;ADyBA;EACE;IAEU,4BAAA;IACR,UAAA;ECVF;EDYA;IAEU,wBAAA;IACR,UAAA;ECVF;AACF;ADcA;EAEU,6BAAA;ACZV;AD8BA;EACE;IAEU,wBAAA;IACR,UAAA;ECfF;EDiBA;IAEU,6BAAA;IACR,UAAA;ECfF;AACF;ADiBA;EAEU,8BAAA;ACfV;AD8BA;EACE;IAEU,6BAAA;IACR,UAAA;ECfF;EDiBA;IAEU,wBAAA;IACR,UAAA;ECfF;AACF;ADmBA;EAEU,4BAAA;ACjBV;ADmCA;EACE;IAEU,wBAAA;IACR,UAAA;ECpBF;EDsBA;IAEU,4BAAA;IACR,UAAA;ECpBF;AACF;ADwBA;EAEU,6BAAA;ACtBV;ADoCA;EACE;IAEU,6BAAA;IACR,UAAA;ECrBF;EDuBA;IAEU,wBAAA;IACR,UAAA;ECrBF;AACF;ADyBA;EAEU,+BAAA;ACvBV;ADwCA;EACE;IAEU,wBAAA;IACR,UAAA;ECzBF;ED2BA;IAEU,4BAAA;IACR,UAAA;ECzBF;AACF;AD4BA;EAEU,gCAAA;AC1BV","file":"animsition.css"}

themes/ayon__/_dev/css/components/animsition.scss

@@ -0,0 +1,396 @@
+.animsition,
+.animsition-overlay {
+  position: relative;
+  opacity: 0;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+}
+.animsition-overlay-slide {
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+}
+/* loading option */
+.roy-loader {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+.roy-loader .icon_loader {
+  position: absolute;
+  top:50%;
+  left:50%;
+  transform: translate(-50%,-50%);
+}
+.roy-loader .icon_loader span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border-width: 2px;
+  border-style: solid;
+  margin-right: 4px;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+  -webkit-animation-iteration-count:infinite;
+          animation-iteration-count:infinite;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+  -webkit-animation-duration: 0.6s;
+          animation-duration: 0.6s;
+  -webkit-animation-name: icon_loader;
+          animation-name: icon_loader;
+
+}
+.roy-loader .icon_loader span:nth-child(2) {
+    animation-delay: .2s;
+}
+.roy-loader .icon_loader span:nth-child(3) {
+    animation-delay: .4s;
+}
+
+@-webkit-keyframes icon_loader {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+  25% {
+    -webkit-transform: translateY(3px);
+            transform: translateY(3px);
+  }
+  75% {
+    -webkit-transform: translateY(-3px);
+            transform: translateY(-3px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+}
+@keyframes icon_loader {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+  25% {
+    -webkit-transform: translateY(3px);
+            transform: translateY(3px);
+  }
+  75% {
+    -webkit-transform: translateY(-3px);
+            transform: translateY(-3px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+  }
+}
+
+
+
+@-webkit-keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+
+.fade-in {
+  -webkit-animation-name: fade-in;
+          animation-name: fade-in;
+}
+
+
+@-webkit-keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+
+.fade-out {
+  -webkit-animation-name: fade-out;
+          animation-name: fade-out;
+}
+@-webkit-keyframes fade-in-up {
+  0% {
+    -webkit-transform: translateY(500px);
+            transform: translateY(500px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes fade-in-up {
+  0% {
+    -webkit-transform: translateY(500px);
+            transform: translateY(500px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+
+.fade-in-up {
+  -webkit-animation-name: fade-in-up;
+          animation-name: fade-in-up;
+}
+
+
+@-webkit-keyframes fade-out-up {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(-500px);
+            transform: translateY(-500px);
+    opacity: 0;
+  }
+}
+
+
+@keyframes fade-out-up {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(-500px);
+            transform: translateY(-500px);
+    opacity: 0;
+  }
+}
+
+
+.fade-out-up {
+  -webkit-animation-name: fade-out-up;
+          animation-name: fade-out-up;
+}
+@-webkit-keyframes fade-in-up-sm {
+  0% {
+    -webkit-transform: translateY(100px);
+            transform: translateY(100px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes fade-in-up-sm {
+  0% {
+    -webkit-transform: translateY(100px);
+            transform: translateY(100px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+
+.fade-in-up-sm {
+  -webkit-animation-name: fade-in-up-sm;
+          animation-name: fade-in-up-sm;
+}
+
+
+@-webkit-keyframes fade-out-up-sm {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(-100px);
+            transform: translateY(-100px);
+    opacity: 0;
+  }
+}
+
+
+@keyframes fade-out-up-sm {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(-100px);
+            transform: translateY(-100px);
+    opacity: 0;
+  }
+}
+.fade-out-up-sm {
+  -webkit-animation-name: fade-out-up-sm;
+          animation-name: fade-out-up-sm;
+}
+
+@-webkit-keyframes fade-in-down {
+  0% {
+    -webkit-transform: translateY(-500px);
+            transform: translateY(-500px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes fade-in-down {
+  0% {
+    -webkit-transform: translateY(-500px);
+            transform: translateY(-500px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+
+.fade-in-down {
+  -webkit-animation-name: fade-in-down;
+          animation-name: fade-in-down;
+}
+
+
+@-webkit-keyframes fade-out-down {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(500px);
+            transform: translateY(500px);
+    opacity: 0;
+  }
+}
+
+
+@keyframes fade-out-down {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(500px);
+            transform: translateY(500px);
+    opacity: 0;
+  }
+}
+
+
+.fade-out-down {
+  -webkit-animation-name: fade-out-down;
+          animation-name: fade-out-down;
+}
+@-webkit-keyframes fade-in-down-sm {
+  0% {
+    -webkit-transform: translateY(-100px);
+            transform: translateY(-100px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes fade-in-down-sm {
+  0% {
+    -webkit-transform: translateY(-100px);
+            transform: translateY(-100px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+
+.fade-in-down-sm {
+  -webkit-animation-name: fade-in-down-sm;
+          animation-name: fade-in-down-sm;
+}
+
+
+@-webkit-keyframes fade-out-down-sm {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(100px);
+            transform: translateY(100px);
+    opacity: 0;
+  }
+}
+
+@keyframes fade-out-down-sm {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(100px);
+            transform: translateY(100px);
+    opacity: 0;
+  }
+}
+
+.fade-out-down-sm {
+  -webkit-animation-name: fade-out-down-sm;
+          animation-name: fade-out-down-sm;
+}

themes/ayon__/_dev/css/components/block-reassurance.scss

@@ -0,0 +1,52 @@
+#block-reassurance{
+  margin-top: 2rem;
+  margin-bottom:4rem;
+  ul {
+    margin-bottom:0;
+  }
+  img{
+    width: 2rem;
+    margin-right: 1rem;
+    float:left;
+    opacity: 0.2;
+    -webkit-transition: all .4s cubic-bezier(.36,.76,0,.88);
+    transition: all .4s cubic-bezier(.36,.76,0,.88);
+  }
+  li{
+  }
+  li .block-reassurance-item{
+    padding: 1rem 2rem;
+    display: flex;
+    align-items: center;
+    span {
+      font-weight: 500;
+      margin:0;
+    }
+  }
+  li .block-reassurance-item:hover img {
+    opacity: 1;
+  }
+  #checkout &{
+    li .block-reassurance-item span {
+      margin-bottom: 0;
+    }
+  }
+  #product &{
+    // border:$border-width solid $body-border;
+    // border-radius: 4px;
+    border:none;
+    span{
+      font-weight: 500;
+      font-size: 0.85rem;
+      line-height: 1rem;
+      display: block;
+      margin-bottom: 0;
+    }
+  }
+}
+
+@include media-breakpoint-down(md) {
+  #block-reassurance {
+    margin-bottom:0;
+  }
+}

themes/ayon__/_dev/css/components/cart.scss

@@ -0,0 +1,521 @@
+.cart-grid {
+  margin-bottom: 1rem;
+}
+.cart-items {
+  margin-bottom: 0;
+}
+.cart-item {
+  padding: 2rem 0;
+  border-bottom:2px solid;
+}
+.cart-item:last-of-type {
+  border:none;
+}
+.cart-summary-line {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-direction: column;
+  margin-bottom:4px;
+  .label {
+    padding-left: 0;
+    white-space: inherit;
+    font-size:14px;
+    text-align: left;
+    margin-right: 14px;
+  }
+  .value {
+    font-size: 20px;
+    font-weight: 600;
+  }
+  .remove {
+    height: 18px;
+    margin-left:10px;
+  }
+  &.cart-summary-subtotals {
+    .label,
+    .value {
+      font-weight: normal;
+    }
+  }
+  &.cart-total {
+    .label {
+      font-size:18px;
+      line-height:18px;
+    }
+    .value {
+      font-size:28px;
+      line-height: 28px;
+      margin-top:10px;
+    }
+  }
+}
+
+/** CART BODY **/
+.cart-grid-body {
+  .cart-container {
+    padding:0 3rem;
+  }
+  .card {
+    border:none;
+    h1 {
+      margin-bottom: 0!important;
+    }
+  }
+  .back_to_shop {
+    margin-top:20px;
+    display: inline-block;
+  }
+  a.label {
+    &:hover {
+    }
+  }
+  .card-block {
+    padding: 1rem 0;
+  }
+  .cart-overview {
+    padding: 1.5rem 0;
+  }
+
+  .product-line-grid {
+    display:flex;
+    width:100%;
+    align-items: center;
+    > * {
+      .row {
+        display:flex;
+        align-items: center;
+      }
+    }
+    .product-line-grid-thumb {
+      margin-right: 50px;
+      img {
+        max-width: 110px;
+      }
+    }
+  }
+}
+@media (min-width: 768px) {
+.product-line-grid-left.col-md-2 {
+  width: 15%;
+}
+.product-line-grid-price.col-md-2 {
+  width: 15%;
+}
+}
+
+/** CART RIGHT **/
+.product-line-grid-price {
+  text-align: center;
+}
+.cart-grid-right {
+  position: static;
+  .cart-summary {
+    padding:3.5rem 4rem;
+    background: rgba(0, 0, 0, 0.05)!important;
+    .card-block {
+      padding-left: 0;
+      padding-right: 0;
+      h4 {
+        margin-bottom: 30px;
+      }
+      a.bright {
+        // width:100%;
+        padding:26px 40px;
+        font-size:16px;
+        font-weight: 500!important;
+      }
+    }
+    a:not(.bright) {
+      position: relative;
+      &:before {
+        display:none
+      }
+      &:after {
+        content:'';
+        position: absolute;
+        height:2px;
+        width:100%;
+        left:0;
+        bottom:-4px;
+        opacity: 0;
+        @include trans-fast;
+      }
+      &.promo-code-button {
+        &:after {
+          width:calc(100% - 30px);
+          left:30px;
+        }
+      }
+      &.collapsed {
+        &:after {
+          opacity: 1;
+        }
+      }
+    }
+  }
+  .promo-discounts {
+    margin-bottom: 0;
+    .cart-summary-line {
+      .label {
+        .code {
+          text-decoration: underline;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  padding-left:6px;
+  .cart-detailed-totals {
+    .card-block {
+      padding: 2.5rem 0;
+      display: flex;
+      flex-wrap: wrap;
+      > * {
+        width:33%;
+        &.cart-total {
+          flex:1 1 auto;
+        }
+      }
+      &.promo-discounts {
+        padding-top:0.5rem;
+        padding-bottom: 0;
+      }
+      &:first-child {
+        padding-top: 0;
+      }
+    }
+    > .block-promo {
+      padding:40px 0;
+      border-top:2px solid rgba(0, 0, 0, 0.1);
+      border-bottom:2px solid rgba(0, 0, 0, 0.1);
+      .promo-name {
+        padding:0
+      }
+      .cart-voucher {
+        p {
+          margin:0;
+        }
+      }
+      form {
+        display: flex;
+        align-items: center;
+        width:100%;
+        flex-wrap: wrap;
+        padding-top:12px;
+      }
+    }
+  }
+  .checkout {
+    margin-top:22px;
+  }
+}
+.block-promo {
+  .promo-code {
+    .alert-danger {
+      position: relative;
+      margin-top: 1.25rem;
+      display: none;
+      &::after {
+        bottom: 100%;
+        left: 10%;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+        border-width: 10px;
+        margin-left: -10px;
+      }
+    }
+  }
+  .promo-input {
+    flex:1 1 auto;
+  }
+  .btn {
+    margin-left: -2px;
+  }
+  .cart-summary-line .label,
+  .promo-name {
+    font-weight: 600;
+    a {
+      font-weight: normal;
+      display: inline-block;
+    }
+  }
+  .promo-code-button {
+    display: inline-flex;
+    align-items: center;
+    i {
+      height: 20px;
+      margin-right:6px;
+    }
+    &:before {
+      display:none;
+    }
+  }
+  &.promo-highlighted {
+    padding: 1.25rem 0 0 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+}
+
+/** CONTENT BODY **/
+.product-line-grid-body {
+  display: flex;
+  width:100%;
+  flex-direction: column;
+  justify-content: space-between;
+  .product-line-name {
+    position: relative;
+    margin-top:10px;
+    .product-line-info {
+      .product-name {
+        font-size:18px;
+        font-weight: 500;
+        display: inline-block;
+        padding-right:40px;
+      }
+      > .unit-price-cart {
+        padding-left: 0.3125rem;
+        font-size: 0.875rem;
+      }
+      &.atts {
+        * {
+          font-size:13px;
+        }
+      }
+    }
+    > .product-line-info.atts {
+      display: inline-block;
+      margin-right:4px;
+      margin-bottom: 0;
+      .value:after {
+        content:',';
+      }
+      &:last-of-type > .value:after {
+        content:'';
+      }
+    }
+    .cart-line-product-actions {
+      .remove-from-cart {
+        position: absolute;
+        right:-5px;
+        top:0;
+        opacity:0.7;
+        @include trans-fast;
+        &:hover {
+          opacity:1;
+        }
+      }
+    }
+  }
+  .product-line-prices {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .product-price {
+      font-size:16px;
+      line-height:16px;
+      font-weight: 500;
+      margin-bottom: 0;
+      .current-price {
+        display: flex;
+      }
+      .regular-price {
+        font-size: 13px;
+        line-height: 13px;
+        margin-left:12px;
+        opacity:0.4;
+      }
+      .discount {
+        display: none;
+      }
+    }
+    .product-line-actions {
+      display: flex;
+      align-items: center;
+      .price {
+        margin-left:40px;
+      }
+      .product-price {
+        margin:0 0 0 18px;
+      }
+      .js-cart-line-product-quantity {
+        border:none;
+        background:none;
+        padding:0 14px;
+        min-width:0;
+        width:40px;
+        text-align: center;
+        font-size:16px;
+        font-weight: 600;
+        box-shadow:none!important;
+      }
+    }
+  }
+}
+/** CONTENT LEFT **/
+.product-line-grid-right {
+  .cart-line-product-actions,
+  .product-price {
+    font-size:1.125rem;
+    line-height: 36px;
+    .remove-from-cart {
+      display: inline-block;
+      margin-top: 0.3125rem;
+    }
+  }
+}
+
+/*** Responsive part ***/
+@include media-breakpoint-down(md) {
+  .cart-grid-right {
+    margin-top:60px;
+  }
+  .cart-grid-body .cart-container {
+    padding:0;
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .cart-grid-body .product-line-grid {
+    // flex-wrap: wrap;
+    flex-direction: row;
+    margin:0;
+    position: relative;
+    > * {
+      padding:0;
+      position: static;
+    }
+  }
+  .product-line-grid-left {
+    flex-basis: 34%;
+    img {
+      max-width: calc(100% - 10px);
+      margin-right: 10px;
+    }
+  }
+  .product-line-grid-body {
+    justify-content: center;
+    flex-direction: column;
+    margin-bottom: 1rem;
+    .product-line-prices {
+      flex-direction: column;
+      align-items: flex-start;
+      margin-top: 16px;
+      .product-line-actions {
+        flex-direction: column;
+        align-items: flex-start;
+        width: 100%;
+        .price {
+          margin:0;
+          .product-price {
+            margin:0;
+          }
+        }
+      }
+    }
+  }
+  .cart-grid {
+    margin-bottom: 0;
+  }
+  body#cart {
+    #main {
+     padding-bottom: 0;
+    }
+    #footer {
+      padding-top:0;
+    }
+  }
+  .cart-item:last-child {
+    padding-bottom:0;
+  }
+  .cart-grid-right .cart-detailed-totals .card-block {
+    flex-direction: column;
+    padding-bottom:0;
+  }
+  .cart-grid-right .cart-detailed-totals .card-block > * {
+    width:100%;
+    margin-bottom: 22px;
+  }
+  .block-promo .btn {
+    margin:12px 0 0 0;
+    width:100%;
+  }
+  #cart #main h1.h1 {
+    display: block;
+  }
+  .cart-grid-right .cart-summary {
+    margin:0 -40px;
+  }
+  .product-line-grid-price {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .product-line-grid-right {
+    flex-basis: 66%;
+    width: 66%;
+    .text-xs-right {
+      position: absolute;
+      top: -3px;
+      right: -14px;
+      padding: 0;
+      width: auto;
+    }
+  }
+  .cart-item {
+    padding:2rem 0 2.5rem;
+  }
+  .cart-grid-body .product-line-grid > * .row {
+    flex-basis: 66%;
+  }
+  .cart-grid-body, .cart-grid-right {
+    padding:0 15px;
+  }
+  .cart-grid-body .back_to_shop {
+    display: none
+  }
+
+}
+
+@include media-breakpoint-down(xs) {
+  .cart-items {
+    padding: 1rem 0;
+  }
+  .cart-item {
+    border-bottom: 1px solid $gray-light;
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+  .cart-grid-body {
+    .cart-overview {
+      padding: 0;
+    }
+    .no-items {
+      padding: 1rem;
+      display: inline-block;
+    }
+    .card-block h1 {
+      text-align: center;
+    }
+  }
+  .product-line-grid-left {
+    padding-right: 0 !important;
+  }
+}
+
+@media (max-width: 360px) {
+  .product-line-grid-right {
+    .qty {
+      width: 100%;
+    }
+    .price {
+      width: 100%;
+    }
+  }
+}

themes/ayon__/_dev/css/components/categories.scss

@@ -0,0 +1,733 @@
+#products {
+  .products-select {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+  }
+  .up {
+    margin-bottom: 1rem;
+    .btn-secondary {
+      text-transform: inherit;
+      .material-icons {
+        margin-right: 0;
+      }
+    }
+  }
+}
+.block-category {
+  margin-bottom: 1.5rem;
+  #category-description {
+    p {
+      margin-bottom: 0;
+    }
+  }
+  .category-cover {
+    display:block;
+    margin-bottom: 60px;
+  }
+}
+.card {
+  padding:2.5em;
+  box-shadow:none;
+  border:2px solid;
+  border-radius:3px;
+}
+
+/* Subcategories */
+#subcategories {
+  padding: 0;
+  overflow: hidden;
+}
+#subcategories ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: 30px;
+  margin-left:-30px;
+  margin-right:-30px;
+  li {
+    flex-grow: 1;
+    width:25%;
+    padding:0 30px;
+    margin-bottom:30px;
+    @include trans-fast;
+    .subcategory-image {
+      margin-bottom:20px;
+      overflow: hidden;
+    }
+    .subcategory-image a {
+        display: block;
+        padding: 0;
+    }
+    .subcategory-image a img {
+        max-width: 100%;
+        vertical-align: top;
+        -webkit-transition: all .88s cubic-bezier(.36,.76,0,.88);
+        transition: all .88s cubic-bezier(.36,.76,0,.88);
+    }
+    h5 {
+      text-align: center;
+    }
+    &:hover {
+      .subcategory-image a img {
+        transform:scale(1.1);
+      }
+    }
+  }
+}
+
+
+.products-selection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 30px;
+  margin-bottom:30px;
+  .sort-by-row {
+    display: flex;
+    align-items: center;
+  }
+  .sort-by {
+    white-space: normal;
+    word-break: break-word;
+    text-align: right;
+    display: flex;
+    align-items: center;
+    height: 60px;
+    padding: 0 30px;
+  }
+  .total-products {
+    i {
+      display: none;
+    }
+    p {
+      vertical-align: middle;
+      display: inline-block;
+      margin:0;
+      span {
+        font-weight: 600;
+        font-size:16px;
+      }
+    }
+  }
+  h1 {
+    padding-top: 0.625rem;
+  }
+}
+.products-sort-order {
+  .select-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    height: 60px;
+    padding: 0 30px;
+    i {
+      height:24px;
+      padding-left:60px;
+    }
+  }
+  .select-list {
+    display: block;
+    padding: 0;
+    margin:3px 40px;
+    opacity:0.5;
+    &:hover {
+      opacity:1;
+      text-decoration: none;
+    }
+  }
+  .dropdown-menu {
+    left: auto;
+    width: 100% ;
+    @include shadow-long;
+    margin: 0;
+    padding:16px 0;
+    transform:translateY(-2px);
+  }
+}
+.facet-dropdown {
+  padding-left: 0;
+  padding-right: 0;
+  margin-bottom: 12px;
+  box-sizing: border-box;
+  &.open {
+    border: 0;
+  }
+  .select-title {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 0;
+    width: 100%;
+    height: 3.75rem;
+    min-height: 60px;
+    padding: 19px 28px;
+    border-width: 2px;
+    border-style: solid;
+    cursor: pointer;
+    font-size: 0.9rem;
+    > i {
+      margin-left: auto;
+    }
+  }
+  .select-list {
+    display: block;
+    padding: 8px 18px;
+    opacity:0.5;
+    &:hover {
+      text-decoration: none;
+      opacity:1;
+    }
+  }
+  .dropdown-menu {
+    padding: 12px;
+    left: auto;
+    width: 100%;
+    border: none;
+    @include shadow-long;
+  }
+}
+
+#search_filters {
+  .sidebar-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  h4 {
+    margin-bottom:18px;
+    font-size:18px;
+  }
+  .custom-radio {
+    margin-right:6px;
+  }
+  .custom-checkbox input[type="checkbox"] + span {
+    margin-top: -1px;
+  }
+  .color, .custom-checkbox input[type="checkbox"] + span.color {
+    width: 26px;
+    height: 26px;
+    // margin-right:9px;
+  }
+  .facet-label.active .custom-checkbox span.color, .facet-label:hover .custom-checkbox span.color {
+    border: none!important;
+  }
+  .facet-label:hover .color:before, .facet-label:hover .custom-checkbox input[type="checkbox"] + span.color:before,
+  .facet-label.active .color:before, .facet-label.active .custom-checkbox input[type="checkbox"] + span.color:before {
+    box-shadow: 0 0 0 2px $input-border-focus;
+    transform: scale(1);
+  }
+  .facet {
+    padding-top: 20px;
+    &:first-of-type {
+      padding-top: 8px;
+    }
+    .collapse {
+      display: block;
+    }
+    .facet-label {
+      margin-bottom: 0;
+      a {
+        margin-top: 0;
+        display: inline-block;
+        position: relative;
+        font-size:14px;
+        .magnitude {
+          font-size: 13px;
+          font-weight: 500;
+          position: absolute;
+          top: -4px;
+          right: -6px;
+          transform: translateX(80%);
+        }
+      }
+    }
+  }
+  .faceted-slider div {
+    z-index: 2!important;
+  }
+}
+body #search_filters .facet .facet-label {
+  text-align: left;
+  display: inline-flex;
+  margin:3px 0;
+  align-items: center;
+  .custom-checkbox {
+    top:-1px;
+    margin-right:7px;
+  }
+  .custom-radio {
+    top:-1px;
+    margin-right:6px;
+  }
+}
+#search_filters_brands,
+#search_filters_suppliers {
+  .facet {
+    padding-top: 0;
+    .facet-label {
+      margin-bottom: 0.3125rem;
+    }
+  }
+}
+.pagination {
+  width: 100%;
+  > div:first-child{
+  }
+  .page-list {
+    margin-top:40px;
+    padding-top:40px;
+    margin-bottom: 1.5rem;
+    li {
+      display: inline;
+    }
+  }
+  a {
+    font-size: 1.25rem;
+    text-decoration: none;
+    &:not(.previous):not(.next) {
+      margin:0 8px;
+      letter-spacing: 0;
+    }
+    &.previous,
+    &.next {
+      font-size:14px;
+      display: flex;
+      i {
+        height: 24px;
+      }
+    }
+    &.previous:hover {
+    }
+    &.next:hover {
+    }
+  }
+  .previous {
+    float: left;
+  }
+  .next {
+    float: right;
+  }
+  .disabled {
+    opacity:0.4;
+  }
+  .current a {
+    text-decoration: none;
+  }
+  .showing {
+    font-size: 14px;
+    padding:0 6px;
+    text-align: right;
+  }
+}
+#_desktop_search_filters_clear_all {
+  display: none;
+}
+.active_filters {
+  padding-bottom:16px;
+  margin-bottom: 30px;
+  display: flex;
+  align-items: center;
+  #_desktop_search_filters_clear_all {
+    display: inline-block;
+    margin-left:auto;
+    .js-search-filters-clear-all {
+      width: auto;
+      background: none;
+      border:none;
+      box-shadow: none;
+      padding:0;
+      margin:0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      i {
+        display: inline-block;
+        height: 24px;
+        width: 24px;
+        @include trans-def;
+      }
+      &:hover {
+        i {
+          transform: rotate(90deg);
+          -webkit-transform: rotate(90deg);
+        }
+      }
+    }
+  }
+  .active-filter-title {
+    display: flex;
+    align-items: center;
+    margin:0 14px 0 0;
+    svg {
+      margin-right:6px;
+    }
+  }
+  ul {
+    display: inline;
+    margin:0;
+  }
+  .filter-block {
+    border: 2px solid;
+    margin-right: $small-space;
+    padding: 0.625rem 1rem;
+    display: inline-block;
+    font-size: $font-size-xs;
+    font-weight:500;
+    .close {
+      font-size: $font-size-lg;
+      font-weight: 600;
+      opacity: 1;
+      margin-top: .2rem;
+      margin-left: .3125rem;
+    }
+  }
+}
+
+.side-column > .sidebar-block.block-categories .sidebar-content {
+  padding: 0;
+}
+.side-column > .block-categories {
+  .category-sub-menu {
+    .category-sub-link {
+      font-size: 0.9rem;
+      padding:0;
+      display:inline-block;
+    }
+    li{
+      position: relative;
+      padding:8px 0 0 0!important;
+    }
+    li[data-depth="0"] > a {
+      font-size: $font-size-h3;
+      font-weight: 500;
+      width: auto;
+      display: inline-block;
+      padding:0;
+      margin-bottom:8px;
+    }
+    li:last-child[data-depth="0"] > a {
+      border-bottom: none;
+    }
+    li:not([data-depth="0"]):not([data-depth="1"]) {
+      padding-left: 0.3125rem;
+      &::before {
+        content: "-";
+        margin-right: 0.3125rem;
+      }
+    }
+  }
+  #side_cats {
+    .collapse-icons {
+      position: absolute;
+      right: 0;
+      top: 0;
+      padding: 0;
+      height: 100%;
+      width:auto;
+      cursor: pointer;
+      text-align: right;
+      line-height: 3rem;
+      z-index: 2;
+      &[aria-expanded="true"] {
+        .add {
+          display: none;
+        }
+        .remove {
+          display: flex;
+        }
+      }
+      .add,
+      .remove {
+        margin-top:8px;
+        display: flex;
+        height: 24px;
+        width:24px;
+        align-items: center;
+        justify-content: center;
+        &:hover {
+        }
+      }
+      .add {
+        transform: rotate(90deg);
+        -webkit-transform: rotate(90deg);
+      }
+      .remove {
+        display: none;
+      }
+    }
+  }
+  .arrows {
+    .arrow-right,
+    .arrow-down {
+      font-size: $font-size-sm;
+      cursor: pointer;
+      margin-left: 2px;
+    }
+    .arrow-down {
+      display: none;
+    }
+    &[aria-expanded="true"] {
+      .arrow-right {
+        display: none;
+      }
+      .arrow-down {
+        display: inline-block;
+      }
+    }
+  }
+}
+
+.side-column > .block-categories .category-top-menu {
+  margin-bottom: 0;
+}
+.side-column > .block-categories .category-sub-menu .category-sub-menu > li {
+  // border-bottom:none;
+}
+.side-column > .block-categories .category-sub-menu .category-sub-menu > li:last-child {
+  border-bottom:none;
+}
+.side-column > .block-categories li[data-depth="0"] .collapse > ul {
+  position: relative;
+  padding-left:12px;
+  margin-bottom:12px;
+  @include trans-fast;
+}
+.side-column > .block-categories li[data-depth="0"] .collapse > ul:before {
+}
+.products-selection {
+  .filter-button {
+    .btn-secondary {
+    }
+  }
+}
+
+#category {
+  #main h1:not(.active-filter-title) {
+    margin-bottom:2rem;
+  }
+}
+
+/*** Responsive part ***/
+@include media-breakpoint-down(md) {
+  .products-selection {
+    flex-direction: column;
+    align-items: flex-start;
+    .total-products {
+      display: none;
+    }
+    .sort-by-row {
+      flex-wrap: wrap;
+      width: 100%;
+      > * {
+        width: auto;
+        flex:1 1 auto;
+      }
+    }
+  }
+  #category {
+    #left-column, #right-column {
+      width: 100%;
+      #search_filter_controls {
+        text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        > * {
+          display:flex;
+          align-items: center;
+          justify-content: center;
+          flex-grow: 1;
+          font-weight: 600;
+        }
+        > #_mobile_search_filters_clear_all {
+          display: none;
+          button {
+            outline:none!important;
+            display: flex;
+            align-items: center;
+            text-transform: none;
+            &:active, &:focus {
+              i {
+                transform: rotate(45deg);
+              }
+            }
+            span {
+              display: inline-block!important;
+            }
+            i {
+              display: block;
+              height: 24px;
+              -webkit-transition: all .4s cubic-bezier(.36,.76,0,.88);
+              transition: all .4s cubic-bezier(.36,.76,0,.88);
+              svg {
+                pointer-events: none;
+                width:24px;
+                * {
+                }
+              }
+            }
+          }
+        }
+        > button {
+          text-transform: none;
+          font-weight: 600;
+          i {
+            height:24px;
+            width:24px;
+            margin-right: 8px;
+          }
+          svg {
+            pointer-events: none;
+            width:24px;
+            height:24px;
+            * {
+              stroke: $btn-color!important;
+            }
+          }
+        }
+        button {
+          margin: 0 0 10px 0;
+          height: 60px;
+          padding: 0;
+          width: 100%;
+          border-radius: 0;
+        }
+        margin-bottom: 22px;
+      }
+    }
+    #search_filter_toggler {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-weight: 600;
+      padding: 0 30px;
+      height: 60px;
+      i {
+        height:22px;
+        padding-left:60px;
+        svg {
+          height:22px;
+          width:22px;
+        }
+      }
+    }
+    
+    #search_filters {
+      margin-bottom: 0;
+      box-shadow: none;
+      padding: 0 0 90px;
+      .facet {
+        padding-top: 0;
+        border-bottom: 2px solid $gray-lighter;
+        &:last-child {
+          border-bottom:none;
+        }
+        .title {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding:23px 0;
+          background: none;
+          cursor: pointer;
+          font-size:16px;
+          .collapse-icons .remove {
+            display: none;
+          }
+        }
+        .title[aria-expanded="true"] {
+          .collapse-icons {
+            .add {
+              display: none;
+            }
+            .remove {
+              display: block;
+            }
+          }
+        }
+        .facet-title {
+          margin:0;
+        }
+        .h6 {
+          margin-bottom: 0;
+          padding: 0;
+          display: inline-block;
+        }
+        .navbar-toggler {
+          display: inline-block;
+          padding: 0;
+          i {
+            color: $title;
+          }
+        }
+        .collapse {
+          display: none;
+          &.in {
+            display: block;
+          }
+        }
+        .facet-label {
+          a {
+            margin-top: 0;
+          }
+        }
+        ul {
+          margin-bottom: 0;
+          li {
+            border-top: 1px solid $gray-lighter;
+            padding: 10px 0;
+          }
+        }
+      }
+    }
+  }
+  .products-sort-order {
+    .select-title {
+      margin-left: 0;
+      line-height: 1.1;
+    }
+  }
+  .products-selection {
+    h1 {
+      padding-top: 0;
+      text-align: center;
+      margin-bottom: 1rem;
+    }
+    .showing {
+      padding: 2rem 0 0;
+    }
+  }
+  #prices-drop #content-wrapper,
+  #new-products #content-wrapper,
+  #best-sales #content-wrapper {
+    width: 100%;
+  }
+  #subcategories ul li {
+    width:50%;
+  }
+}
+
+@include media-breakpoint-down(xs) {
+  #subcategories ul li {
+    width:100%;
+  }
+  .products-selection {
+    .filter-button {
+      padding-left: 0;
+    }
+    .sort-by-row {
+      flex-direction: column;
+      > * {
+        width: 100%;
+        padding:0;
+        &.filter-button {
+          margin-top:14px;
+        }
+      }
+      .select-title {
+        width:100%
+      }
+    }
+  }
+}

themes/ayon__/_dev/css/components/checkout.scss

@@ -0,0 +1,679 @@
+body#checkout {
+    .cart-container {
+        .btn.btn-primary {
+          width:100%;
+        }
+    }
+  #block-reassurance li {
+    border:none;
+  }
+  .login-tabs {
+    a {
+      font-weight: 600;
+      &:after {
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: -4px;
+        width: 0;
+        height: 2px;
+        background-color: #323232;
+        transition: all .4s cubic-bezier(.36,.76,0,.88);
+      }
+      &.active {        
+        &:after {
+          width: 100%;
+        }
+      }
+    }
+  }
+  .create_acc {
+    margin-top:40px;
+    .title {
+      font-weight: 600;
+    }
+    .text-muted {
+      font-size: smaller;
+    }
+  }
+
+  section#content {
+    margin-bottom: 1.563rem;
+  }
+  .container {
+    min-height: 100%;
+  }
+  section.checkout-step {
+    padding: 0 0 2.5rem;
+    @include trans-fast;
+    &:last-child {
+      border: 0;
+    }
+    .step-title {
+      display: flex;
+      align-items: center;
+      font-size: 26px;
+      cursor: pointer;
+      margin-bottom: 0;
+      padding: 0.625rem 0;
+      border-bottom: 2px solid #f2f2f2;
+    }
+    .content {
+      padding: 0;
+      margin-top:32px;
+    }
+    .step-edit {
+      margin-left:auto;
+      text-transform: lowercase;
+      font-weight: normal;
+      @include trans-fast;
+    }
+    &:hover {
+      .step-edit {
+        opacity:1;
+        transform: translateX(-30%) rotate(-12deg);
+      }
+    }
+    .not-allowed {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    .content,
+    .done,
+    .step-edit {
+      display: none;
+    }
+    &.-current {
+      .content {
+        display: block;
+      }
+    }
+    &.-current.-reachable.-complete {
+      .done,
+      .step-edit {
+        display: none;
+      }
+      .step-number {
+        display: inline-block;
+      }
+      .content {
+        display: block;
+      }
+    }
+    &.-reachable.-complete {
+      opacity: 0.5;
+      &:hover {
+        opacity: 1;
+      }
+      h3 {
+        .done {
+          display: flex;
+          height: 48px;
+          align-items: center;
+          margin-right:8px;
+        }
+        .step-number {
+          display: none;
+        }
+        .step-edit {
+          cursor: pointer;
+          display: block;
+          float: right;
+          margin-right: 0.125rem;
+        }
+      }
+      .content {
+        display: none;
+      }
+    }
+    small {
+    }
+    .default-input {
+      min-width: 40%;
+      &[name=address1],
+      &[name=address2] {
+        min-width: 60%;
+      }
+    }
+    .radio-field {
+      margin-top: 1.875rem;
+      label {
+        display: inline;
+      }
+    }
+    .checkbox-field div {
+      margin-top: 3.75rem;
+    }
+    .checkbox-field + .checkbox-field div {
+      margin-top: 0;
+    }
+    .select-field div {
+      padding: 0.625rem 3.125rem;
+    }
+    .form-footer {
+      text-align: center;
+    }
+    #conditions-to-approve {
+      padding-top: 1rem;
+    }
+    .payment-options {
+      label {
+        display: table-cell;
+        cursor:pointer;
+      }
+      .custom-radio {
+        margin-right: $medium-space;
+      }
+      .payment-option {
+        margin-bottom: 0.5rem;
+      }
+    }
+    .step-number {
+      display: inline-block;
+      padding: 0.625rem;
+      &:after {
+        content:' .';
+      }
+    }
+    .address-selector {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      flex-wrap: wrap;
+    }
+    .address-item {
+      flex: 0 0 49%;
+      margin-bottom: $small-space;
+      border: 2px solid $input-border;
+      &.selected {
+        border: 2px solid $input-border-focus;
+        box-shadow: 0 18px 80px 0px rgba(0, 0, 0, 0.11);
+      }
+    }
+    .address-alias {
+      display: inline-block;
+      font-weight: 500;
+      margin-left:10px;
+    }
+    .address {
+      margin-left: 36px;
+      font-weight: normal;
+      line-height: 22px;
+      font-size: 14px;
+      margin-top: 18px;
+    }
+    .radio-block {
+      padding: 2rem;
+      text-align: left;
+      cursor: pointer;
+    }
+    .custom-radio {
+      margin-right: 0;
+      input[type="radio"] {
+        height: 1.25rem;
+        width: 1.25rem;
+      }
+    }
+    .delete-address,
+    .edit-address {
+      color: $gray;
+      display: inline-block;
+      margin: 0 0.3125rem;
+      .delete,
+      .edit {
+        font-size: $base-font-size;
+      }
+    }
+    hr {
+      margin: 0;
+    }
+    .address-footer {
+      text-align: center;
+      padding: 0.625rem;
+    }
+    #delivery-addresses,
+    #invoice-addresses {
+      margin-top: 1.25rem;
+    }
+    .add-address {
+      margin-top: 1.25rem;
+      a {
+        i {
+          font-size: $font-size-lg;
+        }
+      }
+    }
+    .delivery-options { margin-bottom:32px; }
+    .delivery_message { font-size:14px; text-align: left; }
+    .delivery-option {
+      padding: 0;
+      border: 2px solid $input-border;
+      margin: 0 0 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      @include trans-fast;
+      &.active {
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        .delname {
+          flex:1 1 auto;
+        }
+        .delprice {
+          margin-left:auto;
+          text-align: right;
+        }
+      }
+      img {
+        max-width:40px;
+        margin-right:16px;
+      }
+      label {
+        padding:2rem 1.5rem;
+        text-align: inherit;
+        margin:0;
+        cursor:pointer;
+        display: flex;
+        min-height: 110px;
+      }
+    }
+    .carrier-delay {
+      font-size:0.875rem;
+    }
+    .carrier-delay,
+    .carrier-name {
+      display: inline-block;
+      word-break: break-word;
+      text-align: left;
+      margin:0;
+    }
+    #customer-form,
+    #delivery-address,
+    #invoice-address,
+    #login-form {
+      margin-left: 0.3125rem;
+      margin-top: 1.563rem;
+      .form-control-label {
+        text-align: left;
+      }
+      .radio-inline {
+        padding: 0;
+        margin-right:14px;
+      }
+    }
+    .sign-in {
+      font-size: $font-size-sm;
+    }
+    .forgot-password {
+      // margin-left: 26%;
+      font-size: 14px;
+      font-weight: 600;
+      margin-top: -20px;
+      margin-bottom: 20px;
+      float: right;
+    }
+  }
+  .additional-information {
+    font-size: $font-size-sm;
+    margin-left: 2.875rem;
+    margin-top: 1.25rem;
+  }
+  .condition-label {
+    margin-left: 2.5rem;
+    margin-top: 0.625rem;
+    label {
+      text-align: inherit;
+    }
+  }
+  .cancel-address {
+    margin: 0.625rem;
+    display: block;
+    color: $body-text;
+    text-decoration: underline;
+  }
+  .modal-content {
+    padding: $medium-space;
+  }
+  #cart-summary-product-list {
+    font-size: $font-size-sm;
+    img {
+      // border: $body-border 1px solid;
+      width: 3.125rem;
+    }
+    .media-left {
+      img {
+        border-radius: 4px;
+      }
+    }
+    .media-body {
+      vertical-align: middle;
+      .product-price {
+        font-size: 16px !important;
+        margin-bottom: 0;
+        float: none!important;
+        display: block;
+        line-height: 1.2;
+        margin-bottom: 30px;
+      }
+      .product-quantity {
+        display: inline-block;
+      }
+    }
+  }
+  #order-summary-content {
+    padding-top: 0.9375rem;
+    h4.h4 {
+      margin-top: 0.625rem;
+      margin-bottom: 1.25rem;
+    }
+    h4.black {
+    }
+    h4.addresshead {
+      margin-top: 0.1875rem;
+    }
+    .noshadow {
+      box-shadow: none;
+    }
+    #order-items {
+      border-right: 0;
+      h3.h3 {
+        margin-top: 1.25rem;
+      }
+      table {
+        tr {
+          &:first-child {
+            td {
+              border-top: 0;
+            }
+          }
+        }
+      }
+    }
+    .order-confirmation-table {
+      padding: 1rem;
+      margin-bottom: 2rem;
+      background-color: $content-bg;
+      border: 3px solid $body-border;
+      border-radius: 0;
+    }
+    .summary-selected-carrier {
+      margin-bottom: 0.75rem;
+      background-color: $content-bg;
+      border: 1px solid $body-border;
+      border-radius: 0;
+      padding: 1rem;
+    }
+    .step-edit {
+      display: inline;
+    }
+    .step-edit:hover {
+      cursor: pointer;
+    }
+    a {
+      .step-edit {
+      }
+    }
+  }
+  #gift_message, #delivery{
+    max-width: 100%;
+    textarea {
+      max-width: 100%;
+      margin-bottom: 10px;
+    }
+  }
+}
+/**** ORDER CONFIRMATION *****/
+#order-details {
+  padding-left: 54px;
+  em {
+    font-style: normal;
+  }
+  > .card-title {
+    margin-bottom: $large-space;
+  }
+  ul {
+    margin-bottom: $medium-space;
+    li {
+      margin-bottom: $small-space;
+    }
+  }
+}
+#content-hook_payment_return {
+  margin-bottom:44px;
+}
+#order-items {
+  border-right: $body-border 2px solid;
+  padding-right: 54px;
+  table {
+    width: 100%;
+    tr {
+      height: 1rem;
+      td {
+        &:last-child {
+          text-align: right;
+        }
+      }
+    }
+  }
+  .order-line {
+    margin-top: 1rem;
+  }
+  .image {
+    img {
+        width: 100%;
+        max-width: 60px!important;
+        border-radius: 4px;
+        margin-bottom: 1rem;
+    }
+  }
+  .details {
+    margin-bottom: 1rem;
+    .customizations {
+      margin-top: 0.625rem;
+    }
+  }
+  .qty {
+    margin-bottom: 1rem;
+  }
+}
+#order-confirmation {
+  #registration-form {
+    width: 50%;
+    margin: 0 auto 1rem;
+  }
+}
+@include media-breakpoint-down(md) {
+  #order-items {
+    display: none;
+  }
+  body#checkout section.checkout-step .step-title {
+    font-size:20px;
+  }
+  .done {
+    margin: 0;
+    padding: 0;
+  }
+  body#checkout section.checkout-step .address-item {
+    flex-grow: 1;
+  }
+  body#checkout section.checkout-step .delivery-option-2 {
+    flex-direction: column;
+  }
+  .delivery-option {
+    display: flex;
+    margin: auto;
+    .custom-radio {
+      flex: 0 0 auto;
+    }
+  }
+  .condition-label {
+    label[for="conditions_to_approve[terms-and-conditions]"] {
+      text-align: left;
+    }
+  }
+  #order-confirmation {
+    #registration-form {
+      width: 100%;
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+
+  footer .btn {
+    width:100%;
+  }
+  .login-tabs {
+    .nav-item+.nav-item {
+      float: right;
+    }
+  }
+  
+#order-confirmation {
+  .card {
+    padding:0;
+    font-size: 14px;
+    p {
+      font-size: 14px;
+    }
+  }
+  .card-block {
+    padding:0 0 10px 0;
+  }
+  .card-title {
+    font-size: 1.125rem;
+    margin-bottom: 30px;
+    padding-bottom: 30px;
+    border-bottom: 2px solid #f2f2f2;
+    i {
+      margin-right: 5px;
+      margin-top: -3px;
+    }
+  }
+  .card.definition-list dl {
+    border:2px solid;
+    padding:15px;
+    strong {
+      font-weight: 600;
+      font-size: 15px;
+      margin:20px 0 30px;
+      display: inline-block;
+    }
+  }
+}
+
+body#checkout section.checkout-step .delivery-option label > .row {
+  flex-direction: column;
+  align-items: flex-start;
+  .delname > .row {
+    margin:0 0 10px 0;
+  }
+  .delprice {
+    text-align: left;
+  }
+}
+body#checkout section.checkout-step .delivery-option label {
+  flex:1 1 auto;
+  padding-right: 0;
+  padding-left:0.5rem;
+}
+
+
+  body#checkout {
+    #header .header-nav {
+      max-height: none;
+      padding: 0;
+    }
+    section.checkout-step {
+      .content {
+        padding: 0.9375rem;
+      }
+    }
+    .form-group {
+      margin-bottom: 0.5rem;
+    }
+  }
+  #order-items {
+    border-right: 0;
+    margin-bottom: 2.5rem;
+    padding:15px;
+    .card-title {
+      border-bottom: 1px solid $body-border;
+      margin-bottom: 1rem;
+      padding-bottom: 1rem;
+    }
+    hr {
+      border-top-color: $body-border;
+    }
+  }
+  .bold {
+    font-weight: bold;
+  }
+  #order-details {
+    padding-left: 0.9375rem;
+    .card-title {
+      border-bottom: 2px solid $body-border;
+      margin-bottom: 1rem;
+      padding-bottom: 1rem;
+      display: none;
+    }
+  }
+  body#checkout section.checkout-step .forgot-password {
+    margin-left: 0;
+    margin-bottom: 20px;
+    text-align: right;
+  }
+
+}
+
+@include media-breakpoint-down(xs) {
+  body#checkout {
+    section.checkout-step {
+      .content {
+        padding: 0.9375rem 0;
+      }
+    }
+  }
+  #payment-confirmation {
+    button {
+      font-size: 0.875rem;
+      &.btn {
+        white-space: normal;
+      }
+    }
+  }
+}
+
+#payment-confirmation {
+  margin-bottom:32px;
+}
+
+.cart-empty {
+  .cart-summary {
+  }
+}
+.js-payment-binary {
+  display: none;
+  .accept-cgv {
+    display: none;
+  }
+  &.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+    }
+    .accept-cgv {
+      display: block;
+    }
+  }
+}

themes/ayon__/_dev/css/components/contact.scss

@@ -0,0 +1,103 @@
+.contact-rich {
+  word-wrap: break-word;
+  display: flex;
+  .block {
+    margin-bottom:90px;
+    margin-right:120px;
+    label {
+      margin-bottom:32px;
+    }
+    .data {
+      line-height: 28px;
+      i {
+        display: inline-block;
+        height: 26px;
+        margin-right: 4px;
+        svg {
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}
+.contact-form {
+  padding: 1rem;
+  width: 100%;
+  h3 {
+    text-transform: uppercase;
+  }
+}
+#contact {
+  .card {
+    padding:0;
+    border:none;
+  }
+  .contact-form {
+    padding:0;
+  }
+}
+
+
+.inputs_col {
+  .alert {
+    float:none;
+    margin-bottom: 40px;
+  }
+  .form-group.row {
+    display:flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    margin-bottom:0;
+    > div {
+      margin-bottom:40px;
+      > label {
+        opacity:0.4;
+        font-size:13px;
+        font-weight: 600;
+        margin-left:8px;
+        margin-right:8px;
+        float:right;
+      }
+    }
+  }
+  input[type="submit"] {
+    padding-left:70px;
+    padding-right:70px;
+  }
+}
+
+@include media-breakpoint-down(md) {
+  #contact {
+    .contact-rich {
+      justify-content: space-around;
+      .block {
+        margin-right:0;
+        margin-bottom:30px;
+      }
+    }
+  }
+
+  .inputs_col {
+    .form-group.row {
+      flex-wrap: nowrap;
+      flex-direction: column;
+      align-items: stretch;
+      > div {
+        margin-bottom:20px;
+      }
+    }
+    input[type="submit"] {
+      width:100%;
+    }
+  }
+}
+@include media-breakpoint-down(sm) {
+  #contact {
+    .contact-rich {
+      flex-direction: column;
+      .block {
+        margin-right:0;
+      }
+    }
+  }
+}

themes/ayon__/_dev/css/components/county.scss

@@ -0,0 +1,229 @@
+.notexist { }
+.countcontainer {
+  margin-top:16px;
+  display:inline-block;
+  max-width: 100%;
+  padding: 0;
+  @include trans-fast;
+  z-index: 2;
+  .county {
+    width: 100%!important;
+    position: relative;
+    height: 60px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    i {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex:1 1 auto;
+      height: 100%;
+      padding: 0 8px 0 0;
+      svg {
+        margin-top:4px;
+      }
+    }
+    .county-cell {
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 20px;
+      padding: 5px 14px 0;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      flex: 1 1 auto;
+      &.last {
+        padding-right: 0;
+      }
+      .county-days, .county-hours, .county-minutes, .county-seconds {
+        letter-spacing: -0.3px;
+      }
+      .county-label {
+        margin:0;
+        padding: 0;
+        font-size: 11px;
+        line-height: 11px;
+        background-color: transparent;
+      }
+    }
+  }
+}
+.product-item.product_show_list .countcontainer {
+  display: none;
+}
+.sidebar-content .thumbnail-container {
+  .countcontainer {
+    display: none;
+  }
+  &:hover .count_icon {
+  }
+}
+
+.thumbnail-container {
+  .count_icon {
+    position: absolute;
+    z-index: 2;
+    right:24px;
+    top:24px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    box-shadow: 0 10px 18px 0px rgba(0, 0, 0, 0.09);
+    @include trans-def;
+    svg {
+      width:38px;
+      height: 38px;
+    }
+  }
+}
+
+.product_count_block .countcontainer .roycountoff:before {
+  display:none;
+}
+.roycountoff
+{
+  height:60px;
+  width:100%;
+  text-align: center;
+  line-height: 60px;
+  color:$prods-count;
+  position:relative;
+  @include shadow-medium;
+}
+.roycountoff > span
+{
+  position:relative;
+}
+
+/* product page count */
+.product_count_block {
+  display:inline-block;
+  width:100%;
+  height:auto;
+  overflow: visible;
+  position: relative;
+  margin:0;
+  .countcontainer {
+    margin:0;
+    position: relative;
+  	padding:0;
+  	border:none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    .clearfix {
+      width:100%;
+    }
+    .count_icon {
+      width:32px;
+      height:32px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      svg {
+        width:32px;
+        height: 32px;
+        * {
+        }
+      }
+    }
+    .count_other {
+      margin-left:14px;
+      .roycounttitle {
+        position: relative;
+        width:100%;
+        font-size:14px;
+        line-height: 16px;
+        margin:0;
+      }
+      .county {
+        padding:0;
+        box-shadow: none;
+        justify-content: flex-start;
+        &:before {
+        }
+        .county-cell {
+          padding:0 8px 0;
+        }
+      }
+    }
+  }
+}
+
+.hand-hour {
+  -webkit-transform-origin: 50% 50%;
+  -moz-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+  -webkit-animation: 20s royspinback infinite linear;
+  -moz-animation: 20s royspinback infinite linear;
+  animation: 20s royspinback infinite linear;
+}
+.hand-min {
+  -webkit-transform-origin: 50% 50%;
+  -moz-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+  -webkit-animation: 1s royspinback infinite linear;
+  -moz-animation: 1s royspinback infinite linear;
+  animation: 1s royspinback infinite linear;
+
+}
+
+@-webkit-keyframes royspinback  {
+  0% {-webkit-transform: rotate(0deg)}
+  100% { -webkit-transform: rotate(-360deg) }
+}
+@-moz-keyframes royspinback  {
+  0% {-moz-transform: rotate(0deg)}
+  100% { -moz-transform: rotate(-360deg) }
+}
+@keyframes royspinback  {
+  0% {transform: rotate(0deg)}
+  100% { transform: rotate(-360deg) }
+}
+
+
+@media (min-width:1200px) {
+  ul.product_list.grid > li:hover .product-container .product-image-container .countcontainer,
+  #index .rv_carousel_container div.owl-item > li:hover .product-container .product-image-container .countcontainer {
+      opacity:0;
+} }
+
+@media (max-width: 479px) {
+  ul.product_list:not(.carousel-home) .roycountdown > div, ul.product_list:not(.carousel-home) .roycountdown > span, ul.product_list:not(.carousel-home) .roycountoff > span { display: none!important; }
+  ul.product_list:not(.carousel-home) .roycountdown, ul.product_list:not(.carousel-home) .roycountoff { width: 54px!important; float:right; text-align: center; }
+  ul.product_list:not(.carousel-home) .roycountdown:after, ul.product_list:not(.carousel-home) .roycountoff:after {
+    display: block;
+    content: "\f3b3";
+    font-family: "IonIcons";
+    font-size: 26px;
+    line-height: 54px;
+    cursor: pointer;
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    -moz-transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+  }
+  .product_count_block .countcontainer .count_other .county {
+    padding:0 6px;
+  }
+  .product_count_block .countcontainer .count_other {
+    margin-left:0;
+  }
+  .product_count_block .countcontainer .count_icon {
+    display: none;
+  }
+}
+
+/* /product page count */

themes/ayon__/_dev/css/components/custom-text.scss

@@ -0,0 +1,36 @@
+#custom-text {
+  background: white;
+  border-radius: 2px;
+  margin-bottom: 1.5rem;
+  padding: 3.125rem 3.125rem;
+  text-align: center;
+  h3 {
+    text-transform: uppercase;
+    color: $gray-darker;
+    font-size: 1.563rem;
+    font-weight: 700;
+  }
+  p {
+    color: $gray-darker;
+    font-weight: 400;
+    font-size: 1.1em;
+    .dark {
+      color: $gray;
+      font-weight: 400;
+    }
+  }
+}
+.page-content.page-cms{
+  text-align: justify;
+  .cms-box{
+    img{
+      max-width: 100%;
+      height:auto;
+    }
+  }
+}
+@include media-breakpoint-down(md) {
+  #block-cmsinfo {
+    padding: $medium-space $large-space;
+  }
+}

themes/ayon__/_dev/css/components/customer.scss

@@ -0,0 +1,405 @@
+/*** SOME GENERIC STYLES ***/
+@mixin customer-area-base-box {
+  padding: 2rem;
+}
+@mixin customer-area-box {
+  @include customer-area-base-box;
+  font-size: $font-size-sm;
+}
+#my-account #main p a {
+  text-decoration: underline;
+  &:hover {
+    text-decoration: none;
+  }
+}
+.table-labeled {
+  th {
+    vertical-align: middle;
+  }
+  td {
+    vertical-align: middle;
+  }
+  .label {
+    font-weight: 400;
+    border-radius: 3px;
+    font-size: inherit;
+    padding: 0.25rem 0.375rem;
+    margin: 0.125rem;
+    white-space: nowrap;
+  }
+}
+.page-order {
+  .table {
+    margin-bottom: 0;
+  }
+  table {
+    th {
+      padding: 0.5rem;
+    }
+    td {
+      padding: 0.5rem;
+    }
+    thead {
+      th {
+        text-align: center;
+      }
+    }
+  }
+}
+#authentication {
+  .tooltip.tooltip-bottom {
+    padding: 0;
+    margin: 0;
+  }
+  .custom-checkbox {
+    display: flex;
+    span {
+      flex: 0 0 1.25rem;
+    }
+    label {
+      padding-left: 0.625rem;
+    }
+  }
+}
+#identity,
+#authentication {
+  .radio-inline {
+    padding: 0;
+    margin-right:1.25rem;
+    .custom-radio {
+    }
+  }
+  .logininstead {
+    padding: 40px 60px;
+    border: 2px solid;
+    text-align: center;
+    margin-top: 60px;
+    a {
+      margin-left:14px;
+    }
+  }
+}
+/*** Most of the customer accpunt pages ***/
+.page-customer-account {
+  #content {
+    .order-actions {
+      a {
+        padding: 0 0.125rem;
+      }
+    }
+    .forgot-password {
+      text-align: right;
+      font-size: 14px;
+      padding-bottom: 40px;
+    }
+  }
+}
+@media(min-width:992px) {
+  .page-customer-account #content .forgot-password {
+    margin-top:-24px;
+  }
+}
+/*** Login page ***/
+.page-authentication {
+  #content {
+    @include customer-area-base-box;
+    max-width: 640px;
+    margin: 0 auto;
+  }
+}
+/*** Addresses page ***/
+.page-addresses {
+  .address {
+    border:2px solid;
+    @include trans-fast;
+    &:hover {
+      box-shadow: 0 10px 40px 0px rgba(0, 0, 0, 0.09);
+    }
+    margin-bottom: 2rem;
+    .address-body {
+      padding: 3rem 3.5rem;
+      h4 {
+        font-weight: 600;
+      }
+    }
+    .address-footer {
+      border-top: 2px solid;
+      padding: 1.25rem 3.5rem;
+      display: flex;
+      align-items: center;
+      a {
+        margin-right: 18px;
+        font-size:14px;
+        line-height: 14px;
+        display: flex;
+        align-items: center;
+        i {
+          width:18px;
+          height:18px;
+          display: inline-block;
+          margin-right:6px;
+          svg {
+            width:18px;
+            height:18px;
+          }
+        }
+        span {
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+  .addresses-footer {
+    margin: 0 0.9375rem;
+    a {
+      i {
+        font-size: $base-font-size;
+      }
+      span {
+        font-size: $base-font-size;
+        vertical-align: middle;
+        margin-top: $small-space;
+      }
+    }
+  }
+}
+@media(min-width: 992px) {
+  .myacc_content {
+    padding-left: 2rem;
+  }
+}
+#main .myacc_content .page-header {
+  margin-bottom:64px;
+}
+
+.myacc_content #notifications .container {
+  padding: 0;
+}
+#history #wrapper #notifications {
+  display: none;
+}
+/*** Order details page ***/
+.page-order-detail {
+  font-size: 0.875rem;
+  .box {
+    padding:0 0 60px;
+    margin-bottom: 60px;
+  }
+  #main .page-content ul {
+    margin:0;
+  }
+  h3 {
+    font-size: $base-font-size;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin-bottom: 1rem;
+  }
+  #order-infos {
+    ul {
+      margin: 0;
+    }
+  }
+  #order-history {
+    .history-lines {
+      .history-line {
+        padding: 0.5rem 0;
+        &:last-child {
+          border-bottom: 0;
+        }
+        .label {
+          display: inline-block;
+          margin: 0.25rem 0;
+          padding: 0.25rem 0.375rem;
+          border-radius: 3px;
+        }
+      }
+    }
+  }
+  .addresses {
+    margin: 0 -0.9375rem;
+    h4 {
+      font-size: $base-font-size;
+      font-weight: 700;
+    }
+  }
+  #order-products {
+    &.return {
+      margin-bottom: 1rem;
+      th {
+        &.head-checkbox {
+          width: 30px;
+        }
+      }
+      td {
+        padding: 1.375rem 0.75rem;
+        &.qty {
+          min-width: 125px;
+          .current {
+            width: 30%;
+            float: left;
+            text-align: right;
+            padding-right: 0.5rem;
+          }
+          .select {
+            width: 70%;
+            float: left;
+            margin: -0.625rem 0;
+            padding-left: 0.25rem;
+            select {
+              text-align: center;
+            }
+          }
+        }
+      }
+    }
+  }
+  .order-items {
+    padding: 0 !important;
+    .order-item {
+      padding: 1rem 1rem 0;
+      border-bottom: 1px solid $gray-lighter;
+      .checkbox {
+        width: 30px;
+        float: left;
+        padding: 0 0.9375rem;
+      }
+      .content {
+        width: calc(100% - 30px);
+        float: left;
+        padding: 0 0.9375rem;
+      }
+      .desc {
+        .name {
+          font-weight: bold;
+        }
+        margin-bottom: 1rem;
+      }
+      .qty {
+        margin-bottom: 1rem;
+        .q {
+          margin-bottom: 0.25rem;
+        }
+        .s {
+          margin-bottom: 0.25rem;
+        }
+      }
+    }
+  }
+  .messages {
+    .message {
+      margin-top: 0.5rem;
+      border-bottom: 1px solid $gray-lighter;
+      &:last-child {
+        border-bottom: 0;
+      }
+      > div {
+        margin-bottom: 0.5rem;
+      }
+    }
+  }
+  .customization {
+    margin-top: 0.75rem;
+  }
+}
+/*** Order return page ***/
+#order-return-infos {
+  .thead-default th {
+  }
+  .customization {
+    margin-top: 0.75rem;
+  }
+}
+/*** My account landing page ***/
+.myacc_left {
+  .myacc_name {
+    font-weight: 500;
+    font-size: 28px;
+    line-height: 28px;
+    display: inline-block;
+  }
+  .links {
+    margin-top:60px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    a {
+      display: flex;
+      align-items: center;
+      font-size: 22px;
+      font-weight: 500;
+      margin-bottom: 30px;
+      width: 100%;
+      float: none;
+      padding: 0;
+      @include trans-fast;
+      &:last-child {
+        margin-top:50px;
+        font-size:20px;
+        opacity:0.5;
+      }
+      &:before {
+        display:none!important;
+      }
+      i {
+        display: inline-block;
+        margin-right:18px;
+        width:24px;
+        height:24px;
+        @include trans-fast;
+      }
+      &:hover {
+        i {
+          transform: translateX(4px);
+          -webkit-transform: translateX(4px);
+        }
+      }
+    }
+  }
+}
+/*** History page ***/
+#history {
+  .orders {
+    margin: 0 -1rem;
+    .order {
+      padding: 0.75rem 1rem;
+      border-bottom: 2px solid $body-border;
+      .label {
+        display: inline-block;
+        margin: 0.25rem 0;
+        padding: 0.25rem 0.375rem;
+        border-radius: 3px;
+      }
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+}
+
+#discount .table-bordered {
+  td, th {
+  border:none;
+  }
+}
+
+/*** FOOTER ***/
+.page-footer {
+  .account-link {
+    margin-right: 2rem;
+    i {
+      font-size: $base-font-size;
+    }
+    span {
+      font-size: $base-font-size;
+      vertical-align: middle;
+    }
+  }
+}
+
+.login-form {
+  margin-top: 15px;
+  .form-footer {
+    text-align: center;
+  }
+}

themes/ayon__/_dev/css/components/customization-modal.scss

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

themes/ayon__/_dev/css/components/drop-down.scss

@@ -0,0 +1,35 @@
+.dropdown{
+  &:hover .expand-more{
+  }
+  .expand-more{
+    cursor: pointer;
+    user-select: none;
+
+  }
+
+  .active{
+    max-height: 200px;
+    overflow-y: hidden;
+    visibility: visible;
+  }
+
+  select {
+    -moz-appearance: none;
+    border: 0 none;
+    outline: 0 none;
+  }
+}
+.dropdown-item {
+  font-size:$font-size-sm;
+  font-weight:$base-font-weight;
+  opacity: 0.5;
+  @include trans-def;
+}
+.dropdown-item:focus, .dropdown-item:hover {
+  background: none;
+  text-decoration: none;
+  opacity: 1;
+}
+ul.dropdown-menu {
+  @include shadow-long;
+}

themes/ayon__/_dev/css/components/errors.scss

@@ -0,0 +1,45 @@
+#products,
+#pagenotfound {
+  #main {
+    .page-header {
+      margin: 2rem 0 3rem;
+    }
+    .page-content {
+      margin-bottom: 10rem;
+    }
+  }
+  .page-not-found {
+    padding: 3rem;
+    .title404 {
+      text-align: center;
+      font-size:12rem;
+      line-height: 12rem;
+      color:$body-border;
+      font-weight: bold;
+      letter-spacing: -1rem;
+      display: inline-block;
+      width: 100%;
+      margin: 1.5rem 0 1rem;
+    }
+    h4 {
+      font-size: 1rem;
+      text-align: center;
+      font-weight: 500;
+      margin: 0.5rem 0!important;
+      color:$body-comment!important;
+    }
+    p {
+      font-size: 1rem;
+      font-weight: 500;
+      text-align: center;
+      color:$body-comment;
+    }
+    .search-widget {
+      margin:0 auto;
+      float: none;
+      input {
+        width: 100%;
+      }
+    }
+  }
+}

themes/ayon__/_dev/css/components/featuredproducts.scss

@@ -0,0 +1,611 @@
+#products,.featured-products,.product-accessories,.product-miniature {
+  .products {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    margin:0 -30px;
+    &.owl-carousel {
+      padding:0 12px;
+      margin:0;
+      .owl-stage-outer {
+        overflow: visible;
+      }
+    }
+  }
+  &.slideme {
+    .products {
+      display:block;
+    }
+  }
+  .product-image {
+    display: block;
+    position: relative;
+    .add_wrap {
+      // display: none;
+    }
+  }
+  .product-thumbnail {
+    display: block;
+    border-radius: 3px 3px 0 0;
+    overflow: hidden;
+  }
+  .product-title a {
+  }
+  .thumbnail-container {
+    position: relative;
+    @include trans-fast;
+    &:hover, &:focus {
+      .action-block {
+        transform: translateY(-1.25rem);
+        .action-btn {
+          opacity:1;
+        }
+      }
+      .product-flags > *, .discount-product {
+        opacity:0;
+        pointer-events: none;
+        transform: translateX(-0.75rem);
+      }
+    }
+  }
+  .product-title {
+    margin-bottom:0.75rem;
+  }
+  .variant-links {
+    position: relative;
+    padding-top: 0.75rem;
+    min-height: 2.5rem;
+    a.color {
+      width:22px;
+      height:22px;
+      &:last-of-type {
+        margin-right:0;
+      }
+    }
+    a.color .ctooltip {
+      position: absolute;
+      pointer-events: none;
+      opacity: 0;
+      font-size:1em;
+      padding:0.75em;
+      border-radius: 3px;
+      @include box-shadow;
+      .change {
+        opacity: 1;
+      }
+    }
+
+  }
+  .action-block {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    position: absolute;
+    padding: 0 11px;
+    z-index: 3;
+    width: 100%;
+    @include trans-def;
+    .action-btn {
+      pointer-events: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      float:right;
+      opacity:0;
+      height:60px;
+      line-height: 18px;
+      box-shadow: 0 8px 18px 0 rgba(0,0,0,0.07);
+      cursor:pointer;
+      @include trans-fast;
+      a {
+        display: inline-block;
+        width:100%;
+        height: 100%;
+      }
+      i {
+        pointer-events: none;
+        display: inline-block;
+        text-align: center;
+        width:100%;
+        height:100%;
+        svg {
+          width:24px;
+          pointer-events: none;
+          * {
+            @include trans-fast;
+          }
+        }
+      }
+      &:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 10px 16px 0 rgba(0,0,0,0.14);
+      }
+    }
+  }
+  .product-description {
+    display: flex;
+    flex-direction: column;
+    margin-top:32px;
+    z-index: 1;
+    background: none;
+    @include trans-def;
+  }
+  .prod-short-desc {
+    line-height: 1.15rem;
+    text-align: center;
+    display: none;
+  }
+  img {
+    width:100%;
+    max-width: 100%;
+    height: auto;
+  }
+  .comments_note {
+    display: flex;
+    align-items: center;
+    span {
+      display: none;
+    }
+  }
+  .regular-price {
+    text-decoration: line-through;
+  }
+  .count {
+    position: relative;
+    bottom: 0.5rem;
+  }
+  .add_to_cart {
+    white-space: normal;
+  }
+}
+
+.regular-price.old-price {
+  text-decoration: line-through;
+}
+
+.product-item:not(.product_show_list) .product-price-and-shipping {
+  a:not(.color) {
+    display: block;
+  }
+}
+
+#roy_specials_col .product-miniature .product-image a:not(.action-btn) { padding:0; }
+
+/* Separate list styles */
+i.gl {
+  opacity:0.4;
+  @include trans-fast;
+  &.active,
+  &:hover {
+    opacity: 1;
+  }
+  svg {
+    width: 24px;
+  }
+  svg * {
+    stroke: $cat-gl!important;
+    @include trans-fast;
+  }
+  &:hover {
+    svg * {
+      // stroke: $body-link-h!important;
+    }
+  }
+}
+.show_list, .show_grid {
+  cursor:pointer;
+  opacity:1.0;
+  height: 24px;
+  display: inline-block;
+  margin-right:4px;
+}
+.show_list:hover, .show_grid:hover {
+}
+
+#products #js-product-list .product-item.product_show_list {
+  width:100%;
+  .thumbnail-container {
+    padding:0;
+    min-height: 140px;
+    &:hover, &:focus {
+    }
+    .product-flags, .action-block, .discount-product {
+      display: none;
+    }
+    .product-thumbnail {
+      border-radius: 3px!important;
+    }
+    .variant-links {
+      display:none!important;
+    }
+    .product-price-and-shipping > span {
+      vertical-align: middle;
+    }
+    form {
+      display: inline-block;
+    }
+    .comments_note {
+      display: none;
+    }
+    .product-description {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-width: 2px 2px 2px 0!important;
+      border-radius: 0 4px 4px 0!important;
+      height:140px;
+      padding: 0 1.75rem 0!important;
+      text-align: left;
+      *:not(.add_to_cart) {
+        text-align: left!important;
+      }
+      .product-title {
+        margin:0!important;
+        flex-basis: 44%;
+      }
+      .add_to_cart {
+        margin-top:0!important;
+        margin-left: 20px;
+      }
+      .product-price-and-shipping {
+        display:flex;
+        align-items: center;
+        .price {
+          margin-left: 14px;
+        }
+      }
+    }
+    &:hover {
+      .product-description {
+      }
+    }
+    .product-image {
+      max-width:140px;
+      float:left;
+      margin-right: 0;
+    }
+  }
+}
+
+#products #js-product-list .product-item {
+  -webkit-transform: translateY(30px);
+  transform: translateY(30px);
+  opacity: 0;
+  -webkit-transition-timing-function: cubic-bezier(0.13, 0.19, 0.34, 0.96);
+  transition-timing-function: cubic-bezier(0.13, 0.19, 0.34, 0.96);
+  -webkit-transition-property: opacity, -webkit-transform;
+  transition-property: opacity, transform;
+  &.show {
+    -webkit-transform: none;
+    transform: none;
+    -webkit-transition-delay: 0s;
+    transition-delay: 0s;
+    opacity: 1;
+  }
+}
+
+.product-item {
+  padding:0 30px;
+  @include trans-fast;
+}
+.product-miniature, .col-image {
+  .discount {
+    display: none;
+  }
+  .product-flags .new,
+  .product-flag,
+  .online-only,
+  .on-sale,
+  .discount-percentage,
+  .discount-amount,
+  .pack {
+    display: inline-block;
+    position: relative;
+    font-size:0.85rem;
+    margin-top: 0.625rem;
+    padding: 0.5rem 1.125rem;
+    min-height: 1.875rem;
+    box-shadow: 6px 9px 22px 0px rgba(0, 0, 0, 0.09);
+    @include trans-def;
+    &.discount-percentage,
+    &.discount-amount,
+    &.on-sale{
+      z-index: 2;
+    }
+    &.online-only {
+      &::before{
+        content:"\E30A";
+        font-family: 'Material Icons';
+        vertical-align: middle;
+        margin: 0.3125rem;
+      }
+    }
+  }
+}
+
+// Homepage products
+
+@media (min-width:992px) {
+.featured-products.col-lg-6 {
+    padding-left:80px;
+    padding-right:80px;
+}
+.featured-products.pl_per2 .product-item {
+  width:50%;
+}
+.featured-products.pl_per4 .product-item {
+  width:25%;
+}
+.featured-products.pl_per5 .product-item {
+  width:20%;
+}
+.featured-products.pl_spa1 {
+  .products {
+    .product-item {
+      .thumbnail-container {
+        margin-bottom:60px;
+      }
+    }
+  }
+  &.pl_lay1 {
+    .products {
+      .product-item {
+        .thumbnail-container {
+          margin-bottom:40px;
+        }
+      }
+    }
+  }
+}
+.featured-products.pl_spa2 {
+  .products {
+    margin:0 -60px;
+    .product-item {
+      padding-left:60px;
+      padding-right:60px;
+      .thumbnail-container {
+        margin-bottom:120px;
+      }
+    }
+  }
+}
+}
+
+// Mini products
+#main .featured-products.mini {
+  .products {
+    .products-box {
+      display:flex;
+      flex-direction: column;
+      .product-item {
+        width:100%;
+        .thumbnail-container {
+          display:flex;
+          align-items: center;
+          margin-bottom:40px;
+          .product-image {
+            margin-right:2rem;
+            width:90px;
+            min-width:90px;
+          }
+          .product-price-and-shipping .regular-price {
+            opacity:0.5;
+            font-size: smaller;
+          }
+          .product-price-and-shipping i {
+            position: absolute;
+            border-radius: 100%;
+            width:40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            top: 50%;
+            lefT: -20px;
+            margin-top: -20px;
+            @include trans-fast;
+            svg {
+              width:20px;
+              height: 20px;
+              margin: 2px 0 0 2px;
+            }
+          }
+          .product-description {
+            min-height: 0;
+            margin:0;
+            display:flex;
+            align-items: flex-start;
+            justify-content: flex-start;
+            .comments_note {
+              margin-top:0;
+              margin-bottom:10px;
+            }
+            .product-title {
+              text-align: left;
+              a {
+                font-size:16px;
+              }
+            }
+            .discount-product {
+              display: none;
+            }
+          }
+        }
+        &:hover {
+          .product-price-and-shipping i {
+            opacity:0;
+            transform: translateX(20px);
+          }
+        }
+      }
+    }
+  }
+  &.pl_per2 {
+    .products {
+      .products-box {
+        width:50%;
+      }
+    }
+  }
+  &.pl_per3 {
+    .products {
+      .products-box {
+        width:33.3333%;
+      }
+    }
+  }
+  &.pl_per4 {
+    .products {
+      .products-box {
+        width:25%;
+      }
+    }
+  }
+  &.pl_per5 {
+    .products {
+      .products-box {
+        width:20%;
+      }
+    }
+  }
+}
+@media(max-width:991px) {
+  #main .featured-products.mini {
+    .products {
+      .products-box {
+        width:50%!important;
+      }
+    }
+  }
+}
+@media(max-width:767px) {
+  #main .featured-products.mini {
+    .products {
+      .products-box {
+        width:100%!important;
+      }
+    }
+  }
+  .featured-products .undertitle {
+    display: none;
+  }
+}
+
+
+
+// Sliders styles
+
+#index #main .featured-products {
+  margin-top:0!important;
+  margin-bottom:0!important;
+}
+#product #main .featured-products {
+  margin-top:0!important;
+  margin-bottom:0!important;
+  .pp_products_wrapper {
+    padding-bottom:60px;
+  }
+}
+
+/* Specials  */
+.side-column > #roy_specials_col {
+  .sidebar-content {
+    // overflow: hidden;
+  }
+  .comments_note {
+    display: none;
+  }
+  .product-item {
+    width:100%;
+    float:none;
+    margin-right:40px;
+    .action-block {
+      // display: none;
+    }
+    .discount-product {
+      display: block;
+      min-width: 64px;
+      min-height: 64px;
+      padding: 0 12px;
+      line-height: 64px;
+      margin:0;
+      -webkit-transform: translate(-5%, -110%);
+      transform: translate(-5%, -110%);
+      overflow: hidden;
+      pointer-events: none;
+      &:before {
+        content: '\F178';
+        width:100%;
+        height: 100%;
+        font-family: 'FontAwesome';
+        font-size: 22px;
+        position: absolute;
+        left:0;
+        top:0;
+        opacity:0;
+        box-shadow: 0 10px 18px 0px rgba(0, 0, 0, 0.04);
+        -webkit-transform: translateX(-100%);
+        transform: translateX(-100%);
+        @include trans-fast;
+      }
+    }
+    &:hover .discount-product {
+      opacity:1;
+      box-shadow: 0 4px 18px 0px rgba(0, 0, 0, 0.24);
+      -webkit-transform: translate(-25%, -110%);
+      transform: translate(-25%, -110%);
+      &:before {
+        opacity:1;
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+      }
+    }
+  }
+  .product-miniature .thumbnail-container {
+    margin:0;
+  }
+  .product-miniature .thumbnail-container:hover {
+    box-shadow: none;
+  }
+  .product-miniature .product-description {
+    background: none;
+    border: none;
+    .prod-short-desc, .prod-short-desc p {
+      font-size:14px;
+      font-weight: 500;
+    }
+  }
+}
+
+
+@include media-breakpoint-up(lg) {
+  #product .product-accessories {
+    .product-item {
+      width:25%;
+    }
+  }
+}
+@include media-breakpoint-down(md) {
+   .product-description .add_wrap {
+     margin-top:0.75rem;
+   }
+
+   
+  .product-miniature {
+    .product-flags .new,
+    .product-flag,
+    .online-only,
+    .on-sale,
+    .discount-percentage,
+    .discount-amount,
+    .pack {
+      font-size:13px;
+      margin-top: 0.5rem;
+      padding: 6px 10px 4px;
+      min-height: 0;
+    }
+  }
+
+
+}

themes/ayon__/_dev/css/components/footer.scss

@@ -0,0 +1,253 @@
+// Before footer
+#footer {
+}
+#footer > .container > .row_zero {
+  margin:0;
+}
+#footer > .container > .row_zero > * {
+  padding-bottom: $section-space-half;
+}
+
+// Footer
+.block_newsletter {
+  @include search-box;
+  font-size: $font-size-lg;
+  p.alert {
+    max-width:100%;
+    padding-top:14px;
+  }
+  p.conditions {
+    font-size:12px;
+    line-height: 15px;
+    margin-top:8px;
+    opacity: 0.75;
+  }
+  form {
+    .input-wrapper {
+    }
+    input[type=text] {
+      height:60px;
+      line-height: 20px;
+      padding:0 22px;
+      @include trans-fast;
+      &:focus {
+        @include shadow-long-h;
+        outline: 0;
+      }
+      width: 100%;
+    }
+    button.go {
+      position: absolute;
+      height:60px;
+      width:60px;
+      top:0;
+      right:0;
+      padding:0;
+      display: inline-block;
+      border:none;
+      outline:none;
+      cursor:pointer;
+      mask-size:24px;
+      mask-repeat: no-repeat;
+      mask-position: center center;
+      -webkit-mask-image: url(../img/mail.svg);
+      mask-image: url(../img/mail.svg);
+      @include trans-fast;
+      &:hover {
+        opacity: 0.4;
+      }
+    }
+  }
+}
+.block-contact {
+    line-height: 1.75em;
+  .block-contact-title {
+    display:none;
+  }
+  p {
+    margin-top:40px;
+  }
+}
+.footer-container h3 {
+    margin-bottom:32px;
+}
+.block-social {
+  text-align: left;
+  ul {
+    margin-bottom: 0;
+  }
+}
+.block-social li {
+    mask-size:cover;
+    display: inline-block;
+    float:left;
+    margin-right: 22px;
+    width:26px;
+    height:26px;
+    cursor: pointer;
+    @include trans-fast;
+  &:first-child {
+    margin-left: 0;
+  }
+  &:hover {
+    transform: translateY(-0.225rem);
+    opacity:0.4;
+    @include shadow-medium;
+  }
+  a {
+    display: block;
+    height: 100%;
+    white-space: nowrap;
+    text-indent: 100%;
+    overflow: hidden;
+    &:before {
+      display: none!important;
+    }
+    &:hover {
+      color: transparent;
+    }
+  }
+}
+.facebook {
+  -webkit-mask-image: url(../img/facebook.svg);
+  mask-image: url(../img/facebook.svg);
+}
+.twitter {
+  -webkit-mask-image: url(../img/twitter.svg);
+  mask-image: url(../img/twitter.svg);
+}
+.rss {
+  -webkit-mask-image: url(../img/rss.svg);
+  mask-image: url(../img/rss.svg);
+}
+.youtube {
+  -webkit-mask-image: url(../img/youtube.svg);
+  mask-image: url(../img/youtube.svg);
+}
+.googleplus {
+  -webkit-mask-image: url(../img/gplus.svg);
+  mask-image: url(../img/gplus.svg);
+}
+.pinterest {
+  -webkit-mask-image: url(../img/pinterest.svg);
+  mask-image: url(../img/pinterest.svg);
+}
+.vimeo {
+  -webkit-mask-image: url(../img/vimeo.svg);
+  mask-image: url(../img/vimeo.svg);
+}
+.instagram {
+  -webkit-mask-image: url(../img/instagram.svg);
+  mask-image: url(../img/instagram.svg);
+}
+.vk {
+  // background-image: url(../img/vk.svg);
+}
+.footer-container {
+    padding-top: $section-space;
+    padding-bottom: $section-space;
+    overflow: hidden;
+    font-size:15px;
+  .links { width:100% }
+  p {
+    font-size:15px;
+  }
+  li {
+    margin-bottom: 0.65rem;
+  }
+  li a {
+    cursor: pointer;
+    font-size: 15px;
+  }
+}
+.links {
+  .collapse {
+    display: inherit;
+  }
+}
+
+
+@include media-breakpoint-down(sm) {
+  .footer-container {
+    box-shadow: none;
+    margin-top: 0;
+    padding-top:60px;
+    padding-bottom:0;
+    .links {
+      .title {
+        padding: 0.625rem;
+        cursor: pointer;
+        .collapse-icons .remove {
+          display: none;
+        }
+      }
+      .h3 {
+        line-height: 1.5;
+        font-size: 1.25rem;
+      }
+      ul {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .links {
+    .title {
+      .collapse-icons .remove {
+        display: none;
+      }
+    }
+    .collapse {
+      display: none;
+      &.in {
+        display: block;
+      }
+    }
+    .title[aria-expanded="true"] .collapse-icons {
+      .add {
+        display: none;
+      }
+      .remove {
+        display: block;
+      }
+    }
+    .navbar-toggler {
+      display: inline-block;
+      padding: 0;
+    }
+  }
+}
+@include media-breakpoint-down(md) {
+  #footer {
+    .navbar-toggler {
+      opacity:0.5;
+    }
+  }
+  .footer-container > .container {
+    padding-left:40px;
+    padding-right:40px;
+  }
+  .block_newsletter {
+    padding-bottom: 0.625rem;
+    p#block-newsletter-label {
+      text-align: center;
+      max-width: 100%;
+      margin-top:20px;
+    }
+    form input[type=text] {
+      min-width: 0;
+    }
+  }
+  .block-social {
+    text-align: center;
+  }
+  .block-contact {
+    padding-left: 1.5rem;
+  }
+}
+@include media-breakpoint-up(lg) {
+  .footer-container {
+    .wrapper.text {
+      padding-right:80px
+    }
+  }
+}

themes/ayon__/_dev/css/components/forgotten-password.css

@@ -0,0 +1,40 @@
+.forgotten-password {
+  padding: 4px;
+}
+.forgotten-password .form-fields .center-email-fields {
+  display: flex;
+  justify-content: center;
+}
+@media (max-width: 767px) {
+  .forgotten-password .form-fields .center-email-fields {
+    flex-direction: column;
+  }
+  .forgotten-password .form-fields .center-email-fields button {
+    margin: 10px;
+    width: calc(100% - 20px);
+  }
+  .forgotten-password .form-fields .center-email-fields .form-control-label {
+    text-align: left;
+  }
+}
+.forgotten-password .form-fields .center-email-fields button {
+  margin-left: 14px;
+}
+.forgotten-password .form-fields .email {
+  padding-left: 0;
+  padding-right: 0;
+}
+.forgotten-password .form-fields .email input {
+  margin-right: 14px;
+}
+@media (max-width: 767px) {
+  .forgotten-password .form-fields .email {
+    padding-left: 10px;
+    padding-right: 10px;
+    width: 100%;
+  }
+}
+.send-renew-password-link {
+  padding-left: 10px;
+  padding-right: 10px;
+}/*# sourceMappingURL=forgotten-password.css.map */

themes/ayon__/_dev/css/components/forgotten-password.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["forgotten-password.scss","forgotten-password.css"],"names":[],"mappings":"AACA;EACE,YAAA;ACAF;ADII;EACE,aAAA;EACA,uBAAA;ACFN;ADIM;EAJF;IAKI,sBAAA;ECDN;EDGM;IACE,YAAA;IACA,wBAAA;ECDR;EDGM;IACE,gBAAA;ECDR;AACF;ADIM;EACE,iBAAA;ACFR;ADMI;EACE,eAAA;EACA,gBAAA;ACJN;ADKM;EACE,kBAAA;ACHR;ADMM;EAPF;IAQI,kBAAA;IACA,mBAAA;IACA,WAAA;ECHN;AACF;ADWA;EACE,kBAAA;EACA,mBAAA;ACTF","file":"forgotten-password.css"}

themes/ayon__/_dev/css/components/forgotten-password.scss

@@ -0,0 +1,50 @@
+
+.forgotten-password {
+  padding: 4px;
+
+  .form-fields {
+
+    .center-email-fields {
+      display: flex;
+      justify-content: center;
+
+      @media (max-width: 767px) {
+        flex-direction: column;
+
+        button {
+          margin: 10px;
+          width: calc(100% - 20px);
+        }
+        .form-control-label {
+          text-align: left;
+        }
+      }
+
+      button {
+        margin-left:14px;
+      }
+    }
+
+    .email {
+      padding-left: 0;
+      padding-right: 0;
+      input {
+        margin-right:14px;
+      }
+
+      @media (max-width: 767px) {
+        padding-left: 10px;
+        padding-right: 10px;
+        width: 100%;
+      }
+    }
+
+    label.required {
+    }
+  }
+}
+
+.send-renew-password-link {
+  padding-left: 10px;
+  padding-right: 10px;
+}

themes/ayon__/_dev/css/components/imageslider.scss

@@ -0,0 +1,78 @@
+.carousel {
+  margin-bottom: 1.5rem;
+  .direction {
+    z-index: auto;
+  }
+  .carousel-inner {
+    height: auto;
+    @media (max-width: 767px) {
+      height: auto;
+    }
+  }
+  .carousel-item {
+    height: 100%;
+    img {
+      @media (max-width: 767px) {
+        max-width: 100%;
+        height: auto;
+      }
+      @media (min-width: 768px) {
+        width: 100%;
+        margin-left: 0;
+      }
+    }
+    figure {
+      margin:0;
+    }
+    .caption {
+      position: absolute;
+      @media (min-width: 768px) {
+      bottom: 28px;
+      left: 90px;
+      }
+      @media (max-width: 767px) {
+        bottom: 5px;
+        left: 40px;
+      }
+      color: white;
+      max-width: 340px;
+      .caption-description p {
+        color: white;
+      }
+    }
+    figure {
+      @media (max-width: 767px) {
+        margin: 0;
+      }
+    }
+  }
+  .carousel-control {
+        display: none;
+    opacity: 1;
+    .icon-next,
+    .icon-prev {
+      &::before {
+        content: "";
+      }
+      i {
+        font-size: 3.125rem;
+        color: white;
+      }
+      &:hover {
+        i {
+          color: $brand-primary;
+        }
+      }
+    }
+    .icon-prev {
+      left: 1rem;
+    }
+    .icon-next {
+      right: 2rem;
+    }
+    &.left,
+    &.right {
+      background: none;
+    }
+  }
+}

themes/ayon__/_dev/css/components/mainmenu.scss

@@ -0,0 +1,206 @@
+#_desktop_top_menu {
+  width:100%;
+  ul#top-menu {
+    position: relative;
+    padding: 0;
+    width: 100%;
+    background: $menu-bg;
+    border-radius: 5px;
+    box-shadow: 0 12px 30px 0 rgba(0,0,0,0.07);
+    display: inline-block;
+    padding:0 0 0 10px;
+    margin:0;
+    li {
+      padding:0;
+      a[data-depth="0"] {
+        font-family: $font-menu;
+        line-height: 68px;
+        font-size: 1.25rem;
+        text-transform: uppercase;
+        color:$menu-link;
+        padding:0 24px;
+        @include trans-fast;
+        &:hover {
+          color:$menu-link-h;
+        }
+      }
+    }
+  }
+}
+
+.top-menu {
+  &[data-depth="1"] {
+    margin: 0;
+    padding: 1.25rem 0.75rem ;
+  }
+  a:not([data-depth="0"]) {
+    display: block;
+    padding: 0.625rem;
+    color: $menu-link;
+    font-weight: 400;
+  }
+  a.dropdown-submenu {
+    color: $menu-link;
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+  a[data-depth="0"] {
+    font-weight: 600;
+    padding: 0.1875rem $small-space 0.375rem;
+    &:hover {
+      #header & {
+        color: $menu-link-h;
+        text-decoration: none;
+      }
+    }
+  }
+  a[data-depth="1"],
+  a[data-depth="2"] {
+    padding: 0 0.625rem 0.625rem 0;
+  }
+  .collapse {
+    display: inherit;
+  }
+  .sub-menu {
+    &.collapse {
+      display: none;
+    }
+    box-shadow: 0 12px 30px 0 rgba(0,0,0,0.07);
+    background: $menu-bg;
+    border-radius: 5px;
+    border: none;
+    width: 100%;
+    min-width: 100%;
+    z-index: 18;
+    display: block!important;
+    opacity:0;
+    visibility:hidden;
+    ul[data-depth="1"] > li {
+      float: left;
+      margin: 0 1.25rem 1.5rem;
+    }
+    a:hover {
+      color: #00c293;
+    }
+  }
+  & > li:hover .sub-menu {
+    top:68px!important;
+    @include trans-fast;
+  }
+  .popover {
+    max-width: inherit;
+    border-radius: 0;
+  }
+}
+.popover.bs-tether-element-attached-top {
+  margin-top: 0;
+}
+
+#mobile_top_menu_wrapper {
+  margin-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  background: $menu-bg;
+  #top-menu {
+    margin-bottom: 0.625rem;
+  }
+  .top-menu {
+    color: $menu-link;
+    .collapse-icons[aria-expanded="true"] {
+      .add {
+        display: none;
+      }
+      .remove {
+        display: block;
+      }
+    }
+    .collapse-icons .remove {
+      display: none;
+    }
+    .navbar-toggler {
+      display: inline-block;
+      padding: 0;
+    }
+    a[data-depth="0"] {
+      padding: 0.625rem;
+      border-bottom: 1px solid $gray-lighter;
+    }
+    .collapse {
+      display: none;
+      &.in {
+        display: block;
+      }
+    }
+    .sub-menu {
+      &.collapse {
+        display: none;
+        &.in {
+          display: block;
+        }
+      }
+      box-shadow: none;
+      z-index: inherit;
+      display: block;
+      position: static;
+      overflow: hidden;
+      margin-left: 0;
+      width: 100%;
+      min-width: 100%;
+      background: $gray-lighter;
+      ul[data-depth="0"] > li {
+        border-bottom: 1px solid $gray;
+      }
+      ul[data-depth="1"] {
+        margin: 0;
+        > li {
+          float: none;
+          margin: 0;
+          a {
+            text-transform: none;
+          }
+        }
+      }
+      ul {
+        padding: 0;
+      }
+      li > a {
+        padding: 0.625rem;
+        border-bottom: 1px solid white;
+        font-weight: bold;
+      }
+      ul[data-depth="2"] li a {
+        padding-left: 1.25rem;
+      }
+      ul[data-depth="3"] li a {
+        padding-left: 2.5rem;
+      }
+      ul[data-depth="4"] li a {
+        padding-left: 3.75rem;
+      }
+    }
+  }
+  .js-top-menu-bottom {
+    a {
+      color: $gray;
+    }
+    .language-selector-wrapper {
+      padding: 0.625rem;
+      .language-selector {
+        display: inline;
+      }
+    }
+    .currency-selector {
+      padding: 0.625rem;
+    }
+    #contact-link {
+      padding: 0.625rem;
+    }
+    .user-info {
+      padding: 0 0.625rem;
+      a {
+        padding: 0.625rem 0;
+        display: block;
+        width: 100%;
+      }
+    }
+  }
+}

themes/ayon__/_dev/css/components/quickview.scss

@@ -0,0 +1,148 @@
+.quickview {
+  display:flex!important;
+  padding:0!important;
+  align-items: center;
+  justify-content: center;
+  .modal-dialog {
+    width: calc(100% - 30px);
+    max-width: 64rem;
+    min-height: 60vh;
+    max-height: 80vh;
+    overflow: hidden;
+  }
+  .left_col {
+    ul {
+      .thumb-container {
+        width:100%;
+        // min-height: 60vh;
+        img {
+          max-width:100%;
+          width:auto;
+        }
+      }
+    }
+  }
+  .right_col {
+    overflow: scroll;
+    overflow-x: hidden;
+    position: absolute;
+    left: 50%;
+    height: 100%;
+      max-height: 80vh;
+    .right_col_inner {
+      padding:60px 40px;
+    }
+    .discover_qw {
+      margin-top:1rem;
+      a {
+        width: 100%;
+      }
+    }
+    .manufacturer-logo {
+      display: none;
+    }
+  }
+  .modal-content {
+    border:none;
+  }
+  .modal-header {
+    border: none;
+    padding: $small-space;
+  }
+  .modal-body {
+    padding:0;
+  }
+  .modal-footer {
+  }
+  .prod-buttons {
+    display:none;
+  }
+  h1.product-title {
+    padding-right: 40px;
+  }
+  .has-discount .discount {
+    font-size: 13px;
+    line-height: 15px;
+  }
+  button.close {
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    top: 55px;
+    right: 55px;
+    opacity: 0.8;
+    cursor:pointer;
+    z-index: 5;
+    outline:none;
+    @include trans-fast;
+    &:hover {
+      opacity:1;
+      outline:none;
+      transform: rotate(90deg);
+    }
+    svg {
+      width: 30px;
+      height: 30px;
+      * {
+      }
+    }
+  }
+  .layer {
+    display: none;
+  }
+  .product-cover img {
+    width: 95%;
+  }
+  .images-container {
+    .product-images > li.thumb-container > .thumb {
+    }
+  }
+  .mask {
+    white-space: nowrap;
+    overflow: hidden;
+    margin: 0 auto;
+    ul {
+      margin:0;
+    }
+  }
+}
+
+@media(min-width:1200px) {
+  .quickview {
+    .modal-dialog {
+      max-width: 1024px;
+    }
+  }
+}
+@media(min-width:992px) and (max-width:1199px) {
+  .quickview {
+    .modal-dialog {
+      max-width: 760px;
+      margin:0;
+    }
+  }
+}
+@include media-breakpoint-down(sm) {
+  .quickview {
+    .modal-dialog {
+      width:100%;
+      height: 100%;
+      margin:0;
+      overflow-y: auto;
+      overflow-x: hidden;
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+      max-height: 100%;
+    }
+    .left_col {
+      width:100%;
+    }
+    .right_col {
+      width:100%;
+      position: relative;
+      left:auto;
+      top:auto;
+      overflow: auto;
+    }
+  }
+}

themes/ayon__/_dev/css/components/renew-password.css

@@ -0,0 +1,9 @@
+.renew-password {
+  margin-left: 10px;
+}
+.renew-password .email {
+  padding-bottom: 30px;
+}
+.renew-password [type=submit] {
+  margin-left: 50px;
+}/*# sourceMappingURL=renew-password.css.map */

themes/ayon__/_dev/css/components/renew-password.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renew-password.scss","renew-password.css"],"names":[],"mappings":"AACA;EACE,iBAAA;ACAF;ADEE;EACE,oBAAA;ACAJ;ADGE;EACE,iBAAA;ACDJ","file":"renew-password.css"}

themes/ayon__/_dev/css/components/renew-password.scss

@@ -0,0 +1,12 @@
+
+.renew-password {
+  margin-left: 10px;
+
+  .email {
+    padding-bottom: 30px;
+  }
+
+  [type=submit] {
+    margin-left: 50px;
+  }
+}

themes/ayon__/_dev/css/components/search-widget.scss

@@ -0,0 +1,73 @@
+.search-widget {
+  @include search-box;
+}
+.header-top {
+  .search-widget {
+    form {
+      input[type="text"] {
+        height: 54px;
+        min-width: inherit;
+        width: 100%;
+        min-width:240px;
+        padding: 0.5rem 2rem 0.5rem 1.25rem;
+        background: none;
+        &:focus {
+          padding-left: 1.5rem;
+          padding-right: 2.5rem;
+          box-shadow: 0 14px 40px 0px rgba(0, 0, 0, 0.11);
+        }
+      }
+      button[type=submit] {
+        outline: none!important;
+        .search svg {
+          width:28px;
+        }
+      }
+    }
+  }
+}
+#checkout {
+  #search_widget {
+    display: none; /* Not ideal solution by allows to reuse same hooks/templates */
+  }
+}
+
+#pagenotfound {
+  .page-content {
+    #search_widget {
+      width: 100%;
+    }
+  }
+}
+
+.page-not-found {
+  .search-widget {
+    form {
+      display: inline-block;
+    }
+  }
+}
+
+.layout-full-width.page-search {
+  h2 {
+    margin-top:22px;
+    text-align: center;
+  }
+}
+
+/*** Responsive part ***/
+@include media-breakpoint-down(sm) {
+  .header-top {
+    .search-widget {
+      float: none;
+      padding: 0 0.9375rem;
+      form {
+        margin: 0 auto;
+        input[type="text"] {
+          min-width: inherit;
+          background: white;
+        }
+      }
+    }
+  }
+}

themes/ayon__/_dev/css/components/sitemap.scss

@@ -0,0 +1,40 @@
+.sitemap-title {
+  text-transform: capitalize;
+}
+
+.sitemap {
+  margin-top: 0.9375rem;
+
+  h2 {
+    color: $title;
+    text-transform: uppercase;
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-left: -15px;
+    width: 100%;
+    height: 35px;
+  }
+
+  ul {
+    margin-left: -15px;
+    margin-top: 20px;
+
+    &.nested {
+      margin-left: 20px;
+    }
+
+    li {
+      font-size: 0.9rem;
+      margin-bottom: 1rem;
+    }
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .sitemap {
+    margin-top: 0;
+  }
+  .sitemap ul {
+    margin-bottom:40px;
+  }
+}

themes/ayon__/_dev/css/components/stores.scss

@@ -0,0 +1,103 @@
+#stores {
+  .page-stores {
+    .store-item {
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+    }
+    margin: 0 auto;
+    .store-picture {
+      img {
+        max-width: 100%;
+      }
+    }
+    .store-item-container {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      padding: $large-space 0;
+      ul {
+        margin-bottom: 0;
+        font-size: $font-size-lg;
+      }
+      .divide-left {
+        border-left: $body-border 2px solid;
+        tr {
+          height: 1.563rem;
+        }
+        td {
+          padding-left: 0.375rem;
+        }
+        th {
+          text-align: right;
+        }
+      }
+      .store-description{
+        font-size: $base-font-size;
+      }
+    }
+    .store-item-footer {
+      margin-top: 0.5rem;
+      padding-top: 0.5rem;
+      display: flex;
+      justify-content: space-around;
+      &.divide-top {
+        border-top: $body-border 2px solid;
+      }
+      div:first-child {
+        flex: 0 0 65%;
+      }
+      i.material-icons{
+        margin-right: $small-space;
+        color: $body-text;
+        font-size: $base-font-size;
+      }
+      li{
+        margin-bottom: $small-space;
+      }
+    }
+  }
+}
+
+/*** Responsive part ***/
+@include media-breakpoint-down(sm) {
+  #stores {
+    .page-stores {
+      width: 100%;
+      .store-item-container {
+        padding: 1rem 0;
+      }
+    }
+  }
+}
+@include media-breakpoint-down(xs) {
+  #stores {
+    .page-stores {
+      .store-item-container {
+        display: block;
+        .divide-left {
+          border-left: none;
+        }
+        .store-description {
+          a {
+            margin-bottom: 0.5rem;
+          }
+          address {
+            margin-bottom: 0.5rem;
+          }
+        }
+      }
+      .store-item-footer {
+        display: block;
+        &.divide-top {
+          border-top: $body-border 2px solid;
+        }
+        li{
+          margin-bottom: $small-space;
+        }
+        .card-block {
+          padding: 0.75rem 0.75rem 0;
+        }
+      }
+    }
+  }
+}

themes/ayon__/_dev/css/partials/_commons.scss

@@ -0,0 +1,696 @@
+body,
+html {
+  height: 100%;
+}
+body {
+  direction: ltr;
+  font-family: $font-text;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1.5em;
+  main {
+    -webkit-transition: all 0.52s cubic-bezier(0.36, 0.76, 0, 0.88);
+    transition: all 0.52s cubic-bezier(0.36, 0.76, 0, 0.88);
+  }
+}
+ul {
+  list-style: none;
+  padding-left: 0;
+}
+a {
+    z-index: 1;
+    position: relative;
+    @include trans-fast;
+}
+a:hover, a:focus {
+  text-decoration: none;
+  outline:none;
+}
+
+p {
+  font-size: 0.9375rem;
+  font-weight: $base-font-weight;
+}
+.dropdown-item:focus,
+.dropdown-item:hover {
+  background: none;
+}
+.color,
+.custom-checkbox input[type="checkbox"] + span.color {
+  width: 42px;
+  height: 42px;
+  display: inline-block;
+  margin: 0.05rem 0.15rem 0 0;
+  border: none;
+  cursor: pointer;
+  background-size: contain;
+  border-radius: 50%;
+  position: relative;
+  @include trans-fast;
+  &:before {
+    pointer-events: none;
+    content:'';
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height: 100%;
+    box-shadow: inset 0 0 0 4px $content-bg, 0 0 0 3px $content-bg;
+    border-radius: 50%;
+    transform: scale(1.15);
+    @include trans-fast;
+    z-index:2;
+  }
+  #search_filters &:before {
+    box-shadow: 0 0 0 3px $content-bg;
+  }
+  &.white:after {
+    pointer-events: none;
+    content:' ';
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height: 100%;
+    box-shadow: inset 0 0 0 8px $border-color;
+    border-radius: 50%;
+    @include trans-fast;
+    z-index:1;
+  }
+  &:hover {
+    @include shadow-medium;
+    &:before {
+      box-shadow: inset 0 0 0 7px $content-bg, 0 0 0 0 $body-border;
+      transform: scale(0.9);
+    }
+  }
+  &.white:hover:after {
+    box-shadow: inset 0 0 0 9px $border-color;
+    transform: scale(0.9);
+  }
+  &.white:hover:before {
+    box-shadow: inset 0 0 0 7px $content-bg, 0 0 0 3px $body-border;
+  }
+}
+
+.modal-content {
+  border:none;
+  border-radius: 0;
+}
+
+.facet-label {
+  &.active,
+  &:hover {
+    .custom-checkbox span.color {
+      border: $input-btn-border-width solid $input-border-focus;
+    }
+  }
+}
+.h1,
+.h2,
+.h3 {
+}
+.h4 {
+}
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.125;
+}
+//Buttons style
+.btn:not(.btn-touchspin) {
+  line-height: 18px;
+  padding:19px 32px;
+  white-space: normal;
+  @include shadow-low;
+  @include trans-fast;
+  &:hover,
+  &:focus,
+  &.btn-primary.disabled:hover,
+  &.btn-primary:disabled:hover {
+    border:2px solid;
+    text-decoration: none;
+    box-shadow:none;
+  }
+  &.wide {
+    padding-left:60px;
+    padding-right:60px;
+  }
+}
+.btn-primary,
+.btn-secondary {
+  .material-icons {
+    margin-right: $small-space;
+  }
+}
+.btn-tertiary {
+  @extend .btn-secondary;
+  padding: 0.25rem;
+  margin: 0.25rem 0;
+}
+.btn-unstyle {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  text-align: inherit;
+  &:focus {
+    outline: 0;
+    .expand-more {
+    }
+  }
+}
+.btn-high {
+  padding:24px 30px;
+}
+label ,.label {
+  text-align: right;
+  font-size: 1rem;
+}
+small.label, small.value {
+  font-size: 0.8125rem;
+}
+.form-control-label {
+  padding-top: 0.625rem;
+}
+input, select {
+  @include trans-fast;
+}
+.form-control, #quantity_wanted {
+  border-width:2px;
+  border-style: solid;
+  padding: 19px 28px;
+  min-width:6rem;
+  font-weight:600;
+  font-size:13px;
+  line-height: 18px;
+  outline:none;
+}
+svg {
+  pointer-events: none;
+  > * {
+    pointer-events: none;
+  }
+}
+.input-group {
+  min-width:6rem;
+  &.bootstrap-touchspin {
+    box-shadow: none;
+    display: flex;
+  }
+  &.focus {
+  }
+  .form-control:focus {
+    outline: none;
+  }
+  .input-group-btn {
+    width:0;
+    height: 100%;
+    &.group-span-filestyle {
+      width:auto;
+      outline: none;
+      > .btn {
+        position: absolute;
+        right:0;
+        top:0;
+        height:100%;
+        z-index: 5;
+        display: flex;
+        align-items: center;
+        .buttonText {
+          display: flex;
+          @include trans-fast;
+          svg {
+            width:26px;
+            height: 26px;
+          }
+        }
+        &:hover {
+          .buttonText {
+            transform: rotate(30deg);
+          }
+        }
+      }
+    }
+    > .btn {
+      border: 0;
+      box-shadow: none;
+      font-size: 0.6875rem;
+      font-weight: normal;
+      margin-left: 0;
+      padding: 0.625rem 1rem;
+      text-transform: uppercase;
+      outline: none!important;
+      &[data-action="show-password"]{
+        height: 100%;
+        color:$input-text;
+        background: none;
+        border:none;
+        // border-left:2px solid $input-border;
+        position: absolute;
+        top:0;
+        right:0;
+        width: auto;
+        z-index: 5;
+        display: flex;
+        align-items: center; // fix 2020 for eye icon position
+        &:before {
+          content:'';
+          height:50%;
+          width: 2px;
+          left:0;
+          top:25%;
+          position: absolute;
+        }
+        i {
+            pointer-events: none;  // fix 2021 checkout collapse section on click
+          font-size: 1.5rem;
+          font-style: normal;
+          display: inline-block;
+          opacity:0.2;
+          width: 26px;
+          height: 26px;
+          @include trans-fast;
+          svg {
+            width: 26px;
+            height: 26px;
+          }
+        }
+        &:hover {
+          &:before {
+          }
+          i {
+          opacity:1;
+          }
+        }
+      }
+    }
+  }
+}
+.custom-file {
+  .btn {
+    display: flex;
+    svg {
+      width:26px;
+      height: 26px;
+      margin-top: 3px;
+      margin-left: 4px;
+      margin-right: 4px;
+      * {
+        stroke:$btn-color!important;
+      }
+    }
+  }
+}
+input:not(.btn), textarea {
+  &::-webkit-input-placeholder {
+    color: $input-placeholder;
+  }
+  &::-moz-placeholder {
+    color: $input-placeholder;
+  }
+  &:-ms-input-placeholder {
+    color: $input-placeholder;
+  }
+  &:-moz-placeholder {
+    color: $input-placeholder;
+  }
+  &:active {
+    &::-webkit-input-placeholder {
+      color: $input-placeholder;
+    }
+    &::-moz-placeholder {
+      color: $input-placeholder;
+    }
+    &:-ms-input-placeholder {
+      color: $input-placeholder;
+    }
+    &:-moz-placeholder {
+      color: $input-placeholder;
+    }
+  }
+  height: 3.75rem;
+  padding: 19px 28px;
+  border-width:2px;
+  border-style: solid;
+  line-height: 18px;
+  outline:none!important;
+  @include trans-fast;
+  &:not(.btn):focus {
+    padding-left:24px;
+    box-shadow: 0 14px 22px 0px rgba(0, 0, 0, 0.09);
+  }
+}
+textarea, textarea.form-control {
+  min-height: 90px;
+  line-height: 18px;
+  padding-top:22px;
+  padding-bottom:22px;
+}
+.form-control-select, body select.form-control:not([size]):not([multiple]) {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: $input-bg url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAPklEQVR4Ae3TwREAEBQD0V/6do4SXPZg7EsBhsQ8IEmSMOsiuEfg3gL3oXC7wK0bd1G4o8X9F4yIkyQfSrIByQBjp7QuND8AAAAASUVORK5CYII=") no-repeat scroll right 0.5rem center / 1.25rem 1.25rem;
+  height: 3.75rem;
+  min-height: 60px;
+  padding: 19px 28px;
+  border-width:2px;
+  border-style: solid;
+  line-height: 18px;
+  cursor:pointer;
+  outline:none!important;
+  &:focus {
+    padding-left:24px;
+    box-shadow: 0 14px 22px 0px rgba(0, 0, 0, 0.09);
+  }
+}
+body select.form-control:not([size]):not([multiple]) {
+  padding-right: 2.75rem;
+}
+.form-control-valign {
+  padding-top: 0.5rem;
+}
+.form-control-comment {
+  font-size: 0.75rem;
+  padding-top: 4px;
+  padding-left:4px;
+  letter-spacing: 0.1rem;
+  letter-spacing: 0.04rem;
+  position: static;
+  display: inline-block;
+}
+.form-control-submit {
+  &.disabled {
+  }
+}
+@media (max-width:991px) {
+  .form-control-comment {
+    padding-left:5px;
+    text-align: right;
+    float:right;
+  }
+}
+.form-group {
+  &.has-error {
+    input,
+    select {
+      outline: 0.1875rem solid $brand-danger;
+    }
+    .help-block {
+      color: $brand-danger;
+    }
+  }
+  &.row {
+    position: relative;
+  }
+  .req {
+    position: absolute;
+    top:4px;
+    right:-8px;
+    font-size:28px;
+    font-weight: 400;
+  }
+}
+@media(min-width:768px) {
+  .form-group {
+    &.row {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      label {
+        font-size:14px;
+      }
+    }
+  }
+}
+.group-span-filestyle {
+  label {
+    margin: 0;
+    .icon-span-filestyle {
+      display: none;
+    }
+  }
+  .btn-default {
+    text-transform: uppercase;
+    border-radius: 0;
+    font-size: 0.875rem;
+    padding: 0.5rem 1rem;
+  }
+}
+.bootstrap-touchspin {
+  width: auto;
+  float: left;
+  display: inline-block;
+  @include box-shadow-light;
+  input {
+    &:focus {
+      outline: none;
+    }
+    &.form-control,
+    &.input-group {
+      float: left;
+    }
+  }
+  .btn-touchspin {
+    @extend .btn-default;
+    &:hover {
+    }
+  }
+  .input-group-btn-vertical {
+    width: auto;
+    float: left;
+    border-radius: 3px;
+    overflow: hidden;
+    z-indeX: 5;
+    display: table;
+    .bootstrap-touchspin-up {
+      border-radius: 0;
+      padding: 12px 10px 11px;
+    }
+    .bootstrap-touchspin-down {
+      border-radius: 0;
+      padding: 11px 10px 12px;
+    }
+    > .btn {
+      margin-left: 0;
+    }
+    .touchspin-up {
+      &:after {
+        content: "\E5CE";
+      }
+    }
+    .touchspin-down {
+      &:after {
+        content: "\E5CF";
+      }
+    }
+    i {
+      top: 0.2rem;
+      left: 0.15rem;
+      font-size: 0.9375rem;
+    }
+  }
+}
+.custom-radio {
+  display: inline-block;
+  position: relative;
+  width: 22px;
+  height: 22px;
+  vertical-align: middle;
+  cursor: pointer;
+  border-radius: 50%;
+  border: $input-border 2px solid;
+  background: none;
+  margin-right: 0.625rem;
+  @include trans-def;
+  input[type="radio"] {
+    opacity: 0;
+    cursor: pointer;
+    height: auto;
+    & + span {
+      pointer-events: none;
+      display: block;
+      background: none;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      transform: scale(1.5);
+      @include trans-fast;
+    }
+  }
+  input[type="radio"] {
+    &:checked + span {
+      transform: scale(1);
+    }
+    &:focus + span {
+    }
+  }
+  &:hover {
+    border-color: $input-border-focus;
+    @include shadow-long-h;
+  }
+}
+.custom-checkbox {
+  position: relative;
+  input[type="checkbox"] {
+    margin-top: 0.25rem;
+    opacity: 0;
+    width:1.25rem;
+    height:1.25rem;
+    top:0;
+    z-index: 3;
+    // height: auto;
+    cursor: pointer;
+    position: absolute;
+    + span {
+      margin-right: 4px;
+      margin-top: 2px;
+      display: inline-block;
+      width: 1.25rem;
+      height: 1.25rem;
+      vertical-align: middle;
+      cursor: pointer;
+      border: 2px solid $input-border;
+      border-radius: 4px;
+      @include trans-def;
+      .checkbox-checked {
+        display: none;
+        margin: 0 -0.1rem;
+        font-size: 1.5rem;
+        font-weight: bold;
+        @include trans-def;
+      }
+    }
+    &:checked + span {
+      .checkbox-checked {
+        display: inline-block;
+        margin-top: -12px;
+      }
+    }
+    &:focus + span {
+      border-color: $input-border;
+    }
+    &:hover + span {
+        border-color: $input-border-focus;
+        @include shadow-long-h;
+    }
+  }
+  label {
+    text-align: left;
+    font-size: $font-size-sm;
+    margin-bottom: 0;
+  }
+}
+.text-muted {
+  font-size: $font-size-sm;
+}
+.done {
+  display: inline-block;
+  padding: 0 0.8125rem;
+  margin-right: 1.563rem;
+}
+.thumb-mask {
+  > .mask {
+    position: relative;
+    width: 3.438rem;
+    height: 3.438rem;
+    overflow: hidden;
+    border: $gray-light 1px solid;
+    margin: $small-space 0;
+    img {
+      width: 55px;
+      height: 55px;
+    }
+  }
+}
+.definition-list {
+  dl {
+    border:2px solid;
+    padding:10px;
+    font-size: 13px;
+    line-height: 16px;
+    font-weight: 500;
+    display: flex;
+    flex-wrap: wrap;
+    dt {
+      font-weight: 500;
+    }
+    dd {
+      font-weight: 600;
+    }
+    dd,
+    dt {
+      flex: 0 0 45%;
+      padding: 0.625rem;
+      margin: 0.125rem;
+      &:nth-of-type(even) {
+      }
+    }
+  }
+}
+.help-block {
+  margin-top: $small-space;
+}
+.alert {
+    padding: 1.25rem 1.75rem 1.25rem 4.25rem!important;
+    background:none;
+    font-size: 0.875rem!important;
+    line-height: 1.25rem!important;
+    position: relative;
+    &:before {
+      content:'';
+      width:20px;
+      height: 20px;
+      border-radius: 50%;
+      position: absolute;
+      left:1.5rem;
+      top:50%;
+      transform: translateY(-50%);
+      display: block;
+    }
+    ul, ol {
+      margin-bottom:0.5rem!important;
+    }
+}
+.alert-warning {
+  .material-icons {
+    font-size: 2rem;
+    margin-right: $small-space;
+    padding-top: $extra-small-space;
+  }
+  .alert-text {
+    font-size: 0.9375rem;
+    padding-top: $small-space;
+  }
+  .alert-link {
+    border-radius: 2px;
+    border-width: 2px;
+    margin-left: $small-space;
+    padding: $extra-small-space $medium-space;
+    font-weight: 600;
+    font-size: 0.8125rem;
+  }
+  .warning-buttons {
+    margin-top: $extra-small-space;
+  }
+}
+
+.btn-warning {
+  @include transition(all .4s ease-in-out);
+}
+.btn-tertiary-outline {
+  background-image: none;
+  background-color: transparent;
+  @include transition(all .4s ease-in-out);
+}
+.separator {
+  margin: 0;
+}
+.text-center {
+  text-align: center;
+}
+
+.hide_it_pls {
+  visibility: hidden;
+  display: none;
+}

themes/ayon__/_dev/css/partials/_fonts.scss

@@ -0,0 +1,39 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(~material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
+       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
+       url(~material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  vertical-align: middle;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}

themes/ayon__/_dev/css/partials/_mixins.scss

@@ -0,0 +1,86 @@
+@mixin search-box {
+  form {
+    position: relative;
+    input[type=text] {
+      padding: 0.5rem 2rem 0.5rem 1rem;
+      &:focus {
+        padding-left: 1.5rem;
+        padding-right: 2.5rem;
+        + button {
+        }
+      }
+    }
+    button[type=submit] {
+      background: none;
+      border: none;
+      cursor: pointer;
+      @include trans-fast;
+      &:hover {
+      }
+      .search {
+        @include trans-fast;
+        svg {
+          width: 22px;
+        }
+      }
+      .search:hover {
+        color: #00c293;
+      }
+    }
+  }
+}
+
+@mixin box-shadow {
+  box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
+}
+@mixin box-shadow-light {
+  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.2);
+}
+@mixin shadow-low {
+  box-shadow: 0 6px 18px 0px rgba(0, 0, 0, 0.12);
+}
+@mixin shadow-medium {
+  box-shadow: 0 14px 22px 0px rgba(0, 0, 0, 0.14);
+}
+@mixin shadow-long {
+  box-shadow: 0 10px 40px 0px rgba(0, 0, 0, 0.12);
+}
+@mixin shadow-long-h {
+  box-shadow: 0 14px 50px 0px rgba(0, 0, 0, 0.22);
+}
+
+@mixin trans-fast {
+  -webkit-transition: all .22s cubic-bezier(.07,.74,.56,.89);
+  transition: all .22s cubic-bezier(.07,.74,.56,.89);
+}
+@mixin trans-def {
+  -webkit-transition: all .4s cubic-bezier(.36,.76,0,.88);
+  transition: all .4s cubic-bezier(.36,.76,0,.88);
+}
+@mixin trans-slow {
+  -webkit-transition: all .88s cubic-bezier(.36,.76,0,.88);
+  transition: all .88s cubic-bezier(.36,.76,0,.88);
+}
+
+@mixin micro {
+  opacity: 0;
+
+  -webkit-transition-timing-function: cubic-bezier(0.13, 0.19, 0.34, 0.96);
+  transition-timing-function: cubic-bezier(0.13, 0.19, 0.34, 0.96);
+
+  -webkit-transition-property: opacity, -webkit-transform;
+  transition-property: opacity, transform;
+
+  -webkit-transition-duration: 0s;
+  transition-duration: 0s;
+}
+@mixin microgo {
+  -webkit-transition-duration: 1s;
+  transition-duration: 1s;
+  -webkit-transition-delay: .6s;
+  transition-delay: .6s;
+}
+@mixin microclose {
+  -webkit-transition-delay: 1s;
+  transition-delay: 1s;
+}

themes/ayon__/_dev/css/partials/_variables.scss

@@ -0,0 +1,192 @@
+$font-title: 'Cuprum', sans-serif;
+$font-menu: 'Cuprum', sans-serif;
+$font-price: 'Cuprum', sans-serif;
+$font-text: 'Poppins', sans-serif;
+$gray-darker: #232323;
+$gray: #7A7A7A;
+$gray-light: #F1F1F1;
+$gray-lighter: #f6f6f6;
+$brand-primary: #2fb5d2;
+$brand-secondary: #f39d72;
+$brand-success: #4cbb6c;
+$brand-warning: #ff9a52;
+$brand-danger: #ff4c4c;
+$label-color: $gray-darker;
+$btn-primary-color: #fff;
+$btn-primary-bg: $brand-primary;
+$btn-primary-border: transparent;
+$btn-secondary-color: $gray-darker;
+$btn-secondary-bg: $gray-lighter;
+$btn-secondary-border: transparent;
+$btn-border-radius: 0;
+$input-border-color: rgba(0, 0, 0, 0.25);
+$headings-font-weight: 700;
+$tooltip-bg: $brand-danger;
+$border-radius: 0;
+$extra-small-space: 0.3125rem;
+$small-space: 0.625rem;
+$medium-space: 1.25rem;
+$large-space: 1.875rem;
+$extra-large-space: 2.5rem;
+$section-space: 6.25rem;
+$section-space-half: 3.25rem;
+$warning: #FF9A52;
+$warning-hover: #FDE7BB;
+$alert-warning-bg: rgba(255,154,82,0.3);
+$alert-warning-border: $warning;
+$alert-warning-text: $gray-darker;
+$btn-warning-bg: $warning;
+$btn-warning-color: white;
+$btn-tertiary-color: #6C868E;
+$btn-tertiary-hover: #BBCDD2;
+$base-font-weight: 500;
+$base-font-size: 1rem;
+$font-size-lg: 0.9375rem;
+$font-size-sm: 0.875rem;
+$font-size-xs: 0.8125rem;
+$font-size-h1: 1.375rem;
+$font-size-h2: 1.25rem;
+$font-size-h3: 1.125rem;
+$font-size-h4: 1.125rem;
+$font-size-h5: 1rem;
+$font-size-h6: 0.9375rem;
+$display1-size: 3.125rem;
+$display1-weight: 600;
+$display2-size: 2.188rem;
+$display2-weight: 400;
+$display3-size: 1.563rem;
+$display3-weight: 400;
+$display4-size: 1.25rem;
+$display4-weight: 400;
+$text-muted: $gray;
+// $NotoSansPath: "~notosans-fontface/fonts";
+// $NotoSansVersion: "1.0.1";
+
+// Design
+//header
+$header-bg:#f2f2f2;
+$header-nav-bg:#ffffff;
+$header-nav-border:#f2f2f2;
+$header-nav-text:#bebebe;
+$header-nav-link:#424242;
+$header-nav-link-h:#00c293;
+//cart
+$cart-bg:#ffffff;
+$cart-icon:#ff246c;
+$cart-text:#1c1c1c;
+$cart-q:#424242;
+//mainmenu
+$menu-bg:#ffffff;
+$menu-link:#1c1c1c;
+$menu-link-h:#00c293;
+// blog
+
+//levibox
+$box-bg:#ffffff;
+$box-icon:#1c1c1c;
+$box-arrow:#dcdcdc;
+$box-indicate:#00c293;
+//side menu
+$side-bg:#ffffff;
+$side-text:#aaaaaa;
+$side-light:#bbbbbb;
+$side-link:#1c1c1c;
+$side-decor:#f2f2f2;
+
+//mobile menu
+$moba_header:#ffffff;
+$moba_bg:#ffffff;
+$moba_icon:#1c1c1c;
+
+// content
+$main-bg:#f2f2f2;
+$content-bg:#ffffff;
+$body-text: #777777;
+$body-comment: #bbbbbb;
+$body-link: #000000;
+$body-link-h: #00c293;
+$body-border:#f2f2f2;
+$body-table-even:#f6f6f6;
+$alert-danger:#ff4653;
+$success-bg:#00c293;
+$success-text:#ffffff;
+
+//titles
+$title:#1c1c1c;
+$title-before:#f2f2f2;
+$title-decor:#5fceb3;
+//inputs
+$border-width: 2px;
+$border-color: #f2f2f2;
+$input-bg:#ffffff;
+$input-border:#f2f2f2;
+$input-border-focus: #5c5c5c;
+$input-btn-border-width: 2px;
+$input-bg: #ffffff;
+$input-text: #1c1c1c;
+$input-placeholder: #aaaaaa;
+$input-checked: #00c293;
+//buttons
+$btn-bg:#5fceb3;
+$btn-border:#5fceb3;
+$btn-color:#ffffff;
+$btn-bg-h:#1c1c1c;
+$btn-border-h:#1c1c1c;
+$btn-color-h:#ffffff;
+
+// breadcrumb
+$breadcrumb-color:#1c1c1c;
+$breadcrumb-decor:#cccccc;
+
+// tooltips
+$tt-bg:#ffffff;
+$tt-color:#1c1c1c;
+
+// products
+$prods-bg:#ffffff;
+$prods-border:#f2f2f2;
+$prods-name:#1c1c1c;
+$prods-desc:#aaaaaa;
+$prods-action-bg:#ffffff;
+$prods-action-color:#1c1c1c;
+$prods-sale:#f2f2f2;
+$prods-sale-bg:#1c1c1c;
+$prods-new:#5fceb3;
+$prods-new-bg:#ffffff;
+$prods-price:#1c1c1c;
+$prods-old-price:#bbbbbb;
+$cat-gl:#1c1c1c;
+$prods-count:#888888;
+$prods-count-bg:#ffffff;
+$prods-count-i:#000000;
+$prods-count-i-bg:#fbd4d6;
+
+
+// product page
+$pro-title:#1c1c1c;
+$pro-text:#888888;
+$pro-add-bg:#5fceb3;
+$pro-add-color:#ffffff;
+$pro-icons:#888888;
+$pro-labels:#c1c1c1;
+$pro-values:#1c1c1c;
+
+// sidebar
+$side-col-bg:#ffffff;
+$sidebar-title-bg:#5fceb3;
+$sidebar-title-color:#ffffff;
+$sidebar-block-bg:#ffffff;
+$sidebar-block-decor:#f2f2f2;
+$sidebar-block-text:#424242;
+$sidebar-block-link:#1c1c1c;
+$sidebar-block-link-h:#00c293;
+
+// Footer
+$footer-bg:#fafafa;
+$footer-titles:#cccccc;
+$footer-text:#9d9d9d;
+$footer-links:#555555;
+$footer-links-h:#000000;
+$footer-news-bg:#ffffff;
+$footer-news-color:#a0a0a0;
+$footer-news-btn:#ff4653;