diff --git a/assets/img/none.PNG b/assets/img/none.PNG
new file mode 100644
index 0000000000..6882c0493d
Binary files /dev/null and b/assets/img/none.PNG differ
diff --git a/assets/js/app.js b/assets/js/app.js
index b9e92bfdc8..515eeb9aae 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -52,7 +52,10 @@ const pageClasses = {
wishlists: () => import('./theme/wishlist'),
};
-const customClasses = {};
+const customClasses = {
+ 'pages\\custom\\product\\fashion_accesories': () => import('./custom/product/fashion_accessories'), // Windows
+ 'pages/custom/product/fashion_accessories': () => import('./custom/product/fashion_accessories'), // Mac/Linu
+};
/**
* This function gets added to the global window and then called
diff --git a/assets/js/custom/product/fashion_accessories.js b/assets/js/custom/product/fashion_accessories.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/assets/scss/custom/product/fashion_accessories.scss b/assets/scss/custom/product/fashion_accessories.scss
new file mode 100644
index 0000000000..33b149afcc
--- /dev/null
+++ b/assets/scss/custom/product/fashion_accessories.scss
@@ -0,0 +1,153 @@
+body {
+ overflow-x: hidden !important;
+}
+.page-wraper{
+ width: 98.6vw;
+ margin-left: calc(-50vw + 50%);
+ padding: 40px;
+}
+.row{
+ display: flex;
+ text-align: center;
+ background: whitesmoke;
+ border-radius: 25px !important;
+}
+.bundle{
+ min-height: 100px;
+ max-width: 100%;
+ padding-top: 10px;
+ margin-top: 0px;
+ margin-bottom: 0px;
+ display: flex;
+ align-items: center;
+ // margin-bottom: -4.21429rem ;
+}
+.bundle_left_image{
+ margin-top: 10px;
+ margin-bottom: 10px;
+ min-width: 100px;
+ max-width: 0px;
+ max-height: 120px;
+ min-height: 50px;
+}
+.center_bundle_img{
+ margin-top: 10px;
+}
+.left_bundle_title{
+ margin-top: 30px;
+ margin-bottom: 0px;
+ margin-left: 10px;
+ text-align: center;
+ font-size: 25px;
+ font-family: "Roobert-SemiBold";
+}
+.textunder_price {
+ font-size: 23px;
+ font-family: "Poppins", serif;
+ padding-left: 10px;
+ text-align: center;
+ margin-top: 40px;
+ margin-right: 40px;
+}
+.cart_button{
+ color: #ffffff !important;
+ background: linear-gradient(270deg, #990AE2 1.67%, #1485EF 96.39%);
+ border-radius: 5px !important;
+ cursor: pointer !important;
+ overflow: hidden !important;
+ font-weight: bolder !important;
+ margin: 40px 6px !important;
+ font-family: 'Roobert-Regular' !important;
+ width: 7rem !important;
+ height: 45px !important;
+ padding: 0px !important;
+}
+.cart-btn-text{
+ font-size: 10px !important;
+ text-align: center;
+}
+.accessories-row{
+ display: flex;
+ flex-direction: row;
+ flex-wrap:wrap;
+ background-color:white !important;
+}
+.accessories-list{
+ display: flex;
+ background-color: #EFEFEF !important;
+ border-radius: 15px !important;
+ min-height: 300.4px;
+ min-width: 11px;
+ margin: 31px;
+ width: 230px;
+ height: 400px;
+ padding: 10px;
+}
+.accessories-name{
+ display: flex;
+ text-align:left;
+ font-size: 19px;
+ font-weight: 800;
+ margin-bottom: 10px;
+}
+.accessories-price{
+ display: flex;
+ font-size: 19px;
+ margin-left: 10px;
+ margin-bottom: 20px;
+}
+.product-image{
+ min-height: 150px;
+ max-height: 150px;
+ object-fit: contain;
+ width: 100%;
+ text-align: center;
+}
+.row3{
+ display: flex;
+ text-align: left;
+}
+.accessories-list-button{
+ border-radius: 5px !important;
+ cursor: pointer !important;
+ overflow: hidden !important;
+ font-weight: bolder !important;
+ margin: 40px 0% !important;
+ font-family: 'Roobert-Regular' !important;
+ width: 6rem !important;
+ height: 35px !important;
+ margin-right: 230px;
+ height: 400px;
+}
+.button-learn{
+ background:#bac0c5;
+ background-color:none;
+ text-align:center;
+ padding-left: 0px;
+}
+.button-bundle{
+ background: linear-gradient(270deg, #990AE2 1.67%, #1485EF 96.39%);
+ text-align: center;
+}
+.accessories-list-button {
+ display: flex;
+ justify-content: space-between;
+}
+.none{
+ display: flex;
+ background-color: #EFEFEF !important;
+ border-radius: 15px !important;
+ min-height: 300.4px;
+ min-width: 11px;
+ margin: 31px;
+ width: 230px;
+ height: 400px;
+ padding: 10px;
+}
+.none-image{
+ border-radius: 5px !important;
+ cursor: pointer !important;
+ background-color: #cdcdcd !important;
+ font-weight: bolder !important;
+ height: 35px !important;
+}
\ No newline at end of file
diff --git a/assets/scss/settings/global/_global.scss b/assets/scss/settings/global/_global.scss
index ec91ccdff0..0fc197ae09 100644
--- a/assets/scss/settings/global/_global.scss
+++ b/assets/scss/settings/global/_global.scss
@@ -31,8 +31,8 @@
@import "overlay/overlay";
// Set these to true so that Foundation styles are exposed from Citadel
-$include-html-classes: false !default;
-$include-print-styles: false !default;
+$include-html-classes: true !default;
+$include-print-styles: true !default;
$include-html-global-classes: $include-html-classes !default;
// These are needed when setting $include-html-classes to true, so that rems don't conflict with pixels.
diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss
index 8d417ff728..050be41c2f 100644
--- a/assets/scss/theme.scss
+++ b/assets/scss/theme.scss
@@ -77,3 +77,4 @@
// -----------------------------------------------------------------------------
@import "layouts/layouts"; // 1
+@import "./custom/product/fashion_accessories.scss";
diff --git a/stencil.conf.js b/stencil.conf.cjs
similarity index 100%
rename from stencil.conf.js
rename to stencil.conf.cjs
diff --git a/templates/layout/base.html b/templates/layout/base.html
index 36ec2da860..f2d8db2007 100644
--- a/templates/layout/base.html
+++ b/templates/layout/base.html
@@ -8,6 +8,9 @@
{{#block "head"}} {{/block}}
+
+
+