@tapcart/mobile-components 0.6.21 → 0.7.0

package/dist/styles.css

@@ -1,6 +1,8 @@
 /*
 ! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
-*//*
+*/
+
+/*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
@@ -8,10 +10,14 @@
 *,
 ::before,
 ::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
-  border-color: #e5e7eb; /* 2 */
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
 }
 
 ::before,
@@ -29,14 +35,21 @@
 */
 
 html {
-  line-height: 1.5; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  -moz-tab-size: 4; /* 3 */
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
   -o-tab-size: 4;
-     tab-size: 4; /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
-  font-feature-settings: normal; /* 5 */
-  font-variation-settings: normal; /* 6 */
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
 }
 
 /*
@@ -45,8 +58,10 @@ html {
 */
 
 body {
-  margin: 0; /* 1 */
-  line-height: inherit; /* 2 */
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
 }
 
 /*
@@ -56,9 +71,12 @@ body {
 */
 
 hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
 }
 
 /*
@@ -111,8 +129,10 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
-  font-size: 1em; /* 2 */
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
 }
 
 /*
@@ -150,9 +170,12 @@ sup {
 */
 
 table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-  border-collapse: collapse; /* 3 */
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
 }
 
 /*
@@ -166,15 +189,24 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: inherit; /* 1 */
-  font-feature-settings: inherit; /* 1 */
-  font-variation-settings: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  font-weight: inherit; /* 1 */
-  line-height: inherit; /* 1 */
-  color: inherit; /* 1 */
-  margin: 0; /* 2 */
-  padding: 0; /* 3 */
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
 }
 
 /*
@@ -195,9 +227,12 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-  -webkit-appearance: button; /* 1 */
-  background-color: transparent; /* 2 */
-  background-image: none; /* 2 */
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
 }
 
 /*
@@ -239,8 +274,10 @@ Correct the cursor style of increment and decrement buttons in Safari.
 */
 
 [type='search'] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
 }
 
 /*
@@ -257,8 +294,10 @@ Remove the inner padding in Chrome and Safari on macOS.
 */
 
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
 }
 
 /*
@@ -309,6 +348,7 @@ menu {
 /*
 Reset default styling for dialogs.
 */
+
 dialog {
   padding: 0;
 }
@@ -327,14 +367,18 @@ textarea {
 */
 
 input::-moz-placeholder, textarea::-moz-placeholder {
-  opacity: 1; /* 1 */
-  color: #9ca3af; /* 2 */
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
 }
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1; /* 1 */
-  color: #9ca3af; /* 2 */
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
 }
 
 /*
@@ -349,6 +393,7 @@ button,
 /*
 Make sure disabled buttons don't get the pointer cursor.
 */
+
 :disabled {
   cursor: default;
 }
@@ -367,8 +412,10 @@ audio,
 iframe,
 embed,
 object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
 }
 
 /*
@@ -382,157 +429,170 @@ video {
 }
 
 /* Make elements with the HTML hidden attribute stay hidden by default */
+
 [hidden] {
   display: none;
 }
-  .no-scrollbar *:not(.textarea-component)::-webkit-scrollbar {
-    display: none;
-  }
-  .no-scrollbar *:not(.textarea-component) {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
 
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
+.no-scrollbar *:not(.textarea-component)::-webkit-scrollbar {
+  display: none;
+}
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+.no-scrollbar *:not(.textarea-component) {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 47.4% 11.2%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 47.4% 11.2%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 100% 50%;
+  --destructive-foreground: 210 40% 98%;
+  --ring: 215 20.2% 65.1%;
+  --radius: 0.5rem;
+  --fontRegular: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --fontMedium: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --fontBold: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --coreColors-pageColor: #ffffff;
+  --coreColors-shadow: #000000;
+  --coreColors-brandColorPrimary: #000000;
+  --coreColors-headerBackground: #ffffffff;
+  --coreColors-inputBackground: #ffffffff;
+  --coreColors-modalBackground: #ffffffff;
+  --coreColors-tabBar: #ffffffff;
+  --coreColors-dividingLines: #e3e3e3ff;
+  --coreColors-shadowsEnabled: "true";
+  --coreColors-primaryIcon: #121212ff;
+  --coreColors-secondaryIcon: #727272ff;
+  --coreColors-headerIcon: #121212ff;
+  --textColors-primaryColor: #121212ff;
+  --textColors-secondaryColor: #727272ff;
+  --textColors-pageTitle: #121212ff;
+  --textColors-legalText: #727272;
+  --textColors-productTitle: #727272;
+  --textColors-priceText: #121212ff;
+  --textColors-strikethroughPriceText: #727272ff;
+  --textColors-salePriceText: #d91e18ff;
+  --buttonColors-primaryText: #ffffff;
+  --buttonColors-primaryFill: #000000;
+  --buttonColors-primaryOutline: #000000;
+  --buttonColors-primaryShadow: #000000;
+  --buttonColors-disabled: #707070;
+  --buttonColors-secondaryText: #000000;
+  --buttonColors-secondaryFill: #ffffff;
+  --buttonColors-secondaryOutline: #000000;
+  --buttonColors-secondaryShadow: #000000;
+  --stateColors-disabled: #707070;
+  --stateColors-error: #d91e18ff;
+  --stateColors-subscriptions: #008000ff;
+  --stateColors-favorites: #d91e18ff;
+  --stateColors-reviews: #ffaf02ff;
+  --stateColors-success: #008000ff;
+  --stateColors-warning: #ffaf02ff;
+  --stateColors-skeleton: #e3e3e3ff;
+  --productBadging-fill: #000000;
+  --productBadging-text: #fefefe;
+  --productImage-aspectRatio: "2:3";
+  --productImage-scaling: cover;
+  --productImage-isCustom: "false";
+  --standard-shadow: 0px 5px 25px 0px rgba (0,  0,  0,  0.10);
+}
+
+.textarea-component::-webkit-scrollbar {
+  width: 4px;
+}
+
+.textarea-component::-webkit-scrollbar-thumb {
+  border-radius: 1.5rem;
+  background: var(--coreColors-secondaryIcon);
+}
+
+.textarea-component::-webkit-scrollbar-track {
+  border-radius: 1.5rem;
+  background: var(--coreColors-dividingLines);
+}
+
+.textarea-component::-moz-placeholder {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
+.textarea-component::placeholder {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
+/*.dark {*/
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+/*  --background: 222.2 84% 4.9%;*/
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+/*  --foreground: 210 40% 98%;*/
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+/*  --card: 222.2 84% 4.9%;*/
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+/*  --card-foreground: 210 40% 98%;*/
 
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
+/*  --popover: 222.2 84% 4.9%;*/
 
-    --ring: 215 20.2% 65.1%;
+/*  --popover-foreground: 210 40% 98%;*/
 
-    --radius: 0.5rem;
+/*  --primary: 210 40% 98%;*/
 
-    --fontRegular: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-    --fontMedium: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-    --fontBold: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+/*  --primary-foreground: 222.2 47.4% 11.2%;*/
 
-    --coreColors-pageColor: #ffffff;
-    --coreColors-shadow: #000000;
-    --coreColors-brandColorPrimary: #000000;
-    --coreColors-headerBackground: #ffffffff;
-    --coreColors-inputBackground: #ffffffff;
-    --coreColors-modalBackground: #ffffffff;
-    --coreColors-tabBar: #ffffffff;
-    --coreColors-dividingLines: #e3e3e3ff;
-    --coreColors-shadowsEnabled: "true";
-    --coreColors-primaryIcon: #121212ff;
-    --coreColors-secondaryIcon: #727272ff;
-    --coreColors-headerIcon: #121212ff;
-
-    --textColors-primaryColor: #121212ff;
-    --textColors-secondaryColor: #727272ff;
-    --textColors-pageTitle: #121212ff;
-    --textColors-legalText: #727272;
-    --textColors-productTitle: #727272;
-    --textColors-priceText: #121212ff;
-    --textColors-strikethroughPriceText: #727272ff;
-    --textColors-salePriceText: #d91e18ff;
-
-    --buttonColors-primaryText: #ffffff;
-    --buttonColors-primaryFill: #000000;
-    --buttonColors-primaryOutline: #000000;
-    --buttonColors-primaryShadow: #000000;
-    --buttonColors-disabled: #707070;
-    --buttonColors-secondaryText: #000000;
-    --buttonColors-secondaryFill: #ffffff;
-    --buttonColors-secondaryOutline: #000000;
-    --buttonColors-secondaryShadow: #000000;
-
-    --stateColors-disabled: #707070;
-    --stateColors-error: #d91e18ff;
-
-    --stateColors-subscriptions: #008000ff;
-    --stateColors-favorites: #d91e18ff;
-    --stateColors-reviews: #ffaf02ff;
-    --stateColors-success: #008000ff;
-    --stateColors-warning: #ffaf02ff;
-    --stateColors-skeleton: #e3e3e3ff;
-
-    --productBadging-fill: #000000;
-    --productBadging-text: #fefefe;
-
-    --productImage-aspectRatio: "2:3";
-    --productImage-scaling: cover;
-    --productImage-isCustom: "false";
-
-    --standard-shadow: 0px 5px 25px 0px rgba (0,  0,  0,  0.10);
-  }
-  .textarea-component::-webkit-scrollbar {
-    width: 4px;
-  }
-  .textarea-component::-webkit-scrollbar-thumb {
-    border-radius: 1.5rem;
-    background: var(--coreColors-secondaryIcon);
-  }
-  .textarea-component::-webkit-scrollbar-track {
-    border-radius: 1.5rem;
-    background: var(--coreColors-dividingLines);
-  }
-  .textarea-component::-moz-placeholder {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .textarea-component::placeholder {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+/*  --secondary: 217.2 32.6% 17.5%;*/
+
+/*  --secondary-foreground: 210 40% 98%;*/
+
+/*  --muted: 217.2 32.6% 17.5%;*/
+
+/*  --muted-foreground: 215 20.2% 65.1%;*/
 
-  /*.dark {*/
-  /*  --background: 222.2 84% 4.9%;*/
-  /*  --foreground: 210 40% 98%;*/
-  /*  --card: 222.2 84% 4.9%;*/
-  /*  --card-foreground: 210 40% 98%;*/
-  /*  --popover: 222.2 84% 4.9%;*/
-  /*  --popover-foreground: 210 40% 98%;*/
-  /*  --primary: 210 40% 98%;*/
-  /*  --primary-foreground: 222.2 47.4% 11.2%;*/
-  /*  --secondary: 217.2 32.6% 17.5%;*/
-  /*  --secondary-foreground: 210 40% 98%;*/
-  /*  --muted: 217.2 32.6% 17.5%;*/
-  /*  --muted-foreground: 215 20.2% 65.1%;*/
-  /*  --accent: 217.2 32.6% 17.5%;*/
-  /*  --accent-foreground: 210 40% 98%;*/
-  /*  --destructive: 0 62.8% 30.6%;*/
-  /*  --destructive-foreground: 210 40% 98%;*/
-  /*  --border: 217.2 32.6% 17.5%;*/
-  /*  --input: 217.2 32.6% 17.5%;*/
-  /*  --ring: 212.7 26.8% 83.9;*/
-  /*}*/
-  * {
+/*  --accent: 217.2 32.6% 17.5%;*/
+
+/*  --accent-foreground: 210 40% 98%;*/
+
+/*  --destructive: 0 62.8% 30.6%;*/
+
+/*  --destructive-foreground: 210 40% 98%;*/
+
+/*  --border: 217.2 32.6% 17.5%;*/
+
+/*  --input: 217.2 32.6% 17.5%;*/
+
+/*  --ring: 212.7 26.8% 83.9;*/
+
+/*}*/
+
+* {
   border-color: hsl(var(--border));
 }
-  body {
+
+body {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
-    font-feature-settings: "rlig" 1, "calt" 1;
+  font-feature-settings: "rlig" 1, "calt" 1;
 }
 
 *, ::before, ::after {
@@ -634,6 +694,7 @@ video {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
+
 .container {
   width: 100%;
   margin-right: auto;
@@ -641,12 +702,13 @@ video {
   padding-right: 2rem;
   padding-left: 2rem;
 }
-@media (min-width: 1400px) {
 
+@media (min-width: 1400px) {
   .container {
     max-width: 1400px;
   }
 }
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -658,1464 +720,1845 @@ video {
   white-space: nowrap;
   border-width: 0;
 }
+
 .pointer-events-none {
   pointer-events: none;
 }
+
 .pointer-events-auto {
   pointer-events: auto;
 }
+
 .fixed {
   position: fixed;
 }
+
 .absolute {
   position: absolute;
 }
+
 .relative {
   position: relative;
 }
+
 .sticky {
   position: sticky;
 }
+
 .inset-0 {
   inset: 0px;
 }
+
 .inset-x-0 {
   left: 0px;
   right: 0px;
 }
+
 .-bottom-12 {
   bottom: -3rem;
 }
+
 .-left-12 {
   left: -3rem;
 }
+
 .-right-12 {
   right: -3rem;
 }
+
 .-top-12 {
   top: -3rem;
 }
+
 .bottom-0 {
   bottom: 0px;
 }
+
 .bottom-10 {
   bottom: 2.5rem;
 }
+
 .bottom-2 {
   bottom: 0.5rem;
 }
+
 .bottom-6 {
   bottom: 1.5rem;
 }
-.bottom-\[110px\] {
-  bottom: 110px;
-}
+
 .bottom-\[18px\] {
   bottom: 18px;
 }
-.bottom-\[30px\] {
-  bottom: 30px;
-}
+
 .bottom-\[58px\] {
   bottom: 58px;
 }
-.bottom-\[70px\] {
-  bottom: 70px;
-}
+
 .end-4 {
   inset-inline-end: 1rem;
 }
+
 .left-0 {
   left: 0px;
 }
+
 .left-1\/2 {
   left: 50%;
 }
-.left-14 {
-  left: 3.5rem;
-}
+
 .left-2 {
   left: 0.5rem;
 }
-.left-24 {
-  left: 6rem;
-}
+
 .left-4 {
   left: 1rem;
 }
+
 .left-6 {
   left: 1.5rem;
 }
+
 .left-\[50\%\] {
   left: 50%;
 }
+
 .right-0 {
   right: 0px;
 }
+
 .right-2 {
   right: 0.5rem;
 }
-.right-4 {
-  right: 1rem;
-}
-.right-\[100px\] {
-  right: 100px;
-}
-.right-\[140px\] {
-  right: 140px;
-}
-.right-auto {
-  right: auto;
-}
+
 .start-10 {
   inset-inline-start: 2.5rem;
 }
+
 .start-4 {
   inset-inline-start: 1rem;
 }
+
 .top-0 {
   top: 0px;
 }
+
 .top-1\/2 {
   top: 50%;
 }
+
 .top-10 {
   top: 2.5rem;
 }
+
 .top-2 {
   top: 0.5rem;
 }
-.top-4 {
-  top: 1rem;
-}
+
 .top-\[18px\] {
   top: 18px;
 }
+
 .top-\[50\%\] {
   top: 50%;
 }
+
 .z-10 {
   z-index: 10;
 }
+
 .z-20 {
   z-index: 20;
 }
+
 .z-50 {
   z-index: 50;
 }
+
 .z-\[100\] {
   z-index: 100;
 }
+
 .order-1 {
   order: 1;
 }
+
 .order-2 {
   order: 2;
 }
+
 .col-span-2 {
   grid-column: span 2 / span 2;
 }
+
 .col-start-1 {
   grid-column-start: 1;
 }
+
 .row-start-1 {
   grid-row-start: 1;
 }
+
 .m-2 {
   margin: 0.5rem;
 }
+
 .m-auto {
   margin: auto;
 }
+
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
+
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
 }
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
+
 .my-0 {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+
 .my-3 {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
 }
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+
 .my-auto {
   margin-top: auto;
   margin-bottom: auto;
 }
+
 .-mt-4 {
   margin-top: -1rem;
 }
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
-.mb-4 {
-  margin-bottom: 1rem;
-}
+
 .mb-6 {
   margin-bottom: 1.5rem;
 }
+
 .ml-1 {
   margin-left: 0.25rem;
 }
+
 .ml-2 {
   margin-left: 0.5rem;
 }
+
 .ml-4 {
   margin-left: 1rem;
 }
-.mr-0 {
-  margin-right: 0px;
-}
-.mr-0\.5 {
-  margin-right: 0.125rem;
-}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
+
 .mr-4 {
   margin-right: 1rem;
 }
+
 .mt-0 {
   margin-top: 0px;
 }
+
 .mt-1 {
   margin-top: 0.25rem;
 }
+
 .mt-2 {
   margin-top: 0.5rem;
 }
+
 .mt-3 {
   margin-top: 0.75rem;
 }
-.mt-4 {
-  margin-top: 1rem;
-}
+
 .mt-auto {
   margin-top: auto;
 }
+
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
 }
+
 .line-clamp-2 {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+
 .block {
   display: block;
 }
+
+.inline-block {
+  display: inline-block;
+}
+
 .inline {
   display: inline;
 }
+
 .flex {
   display: flex;
 }
+
 .inline-flex {
   display: inline-flex;
 }
+
 .grid {
   display: grid;
 }
+
 .hidden {
   display: none;
 }
+
 .aspect-productImages {
   aspect-ratio: var(--productImage-aspectRatio);
 }
+
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
+
 .h-0 {
   height: 0px;
 }
+
 .h-0\.5 {
   height: 0.125rem;
 }
+
 .h-1 {
   height: 0.25rem;
 }
+
 .h-1\.5 {
   height: 0.375rem;
 }
+
 .h-10 {
   height: 2.5rem;
 }
+
 .h-11 {
   height: 2.75rem;
 }
+
 .h-12 {
   height: 3rem;
 }
+
 .h-14 {
   height: 3.5rem;
 }
+
 .h-2 {
   height: 0.5rem;
 }
+
 .h-2\.5 {
   height: 0.625rem;
 }
+
 .h-4 {
   height: 1rem;
 }
+
 .h-48 {
   height: 12rem;
 }
+
 .h-5 {
   height: 1.25rem;
 }
+
 .h-6 {
   height: 1.5rem;
 }
+
 .h-64 {
   height: 16rem;
 }
+
 .h-7 {
   height: 1.75rem;
 }
+
 .h-8 {
   height: 2rem;
 }
+
 .h-9 {
   height: 2.25rem;
 }
+
 .h-\[1px\] {
   height: 1px;
 }
+
 .h-\[22px\] {
   height: 22px;
 }
+
 .h-\[2px\] {
   height: 2px;
 }
+
 .h-\[36\] {
   height: 36;
 }
+
 .h-\[42px\] {
   height: 42px;
 }
+
 .h-\[48px\] {
   height: 48px;
 }
+
 .h-\[4px\] {
   height: 4px;
 }
+
 .h-auto {
   height: auto;
 }
+
 .h-full {
   height: 100%;
 }
+
 .max-h-\[200px\] {
   max-height: 200px;
 }
+
 .max-h-\[240px\] {
   max-height: 240px;
 }
+
 .max-h-\[300px\] {
   max-height: 300px;
 }
+
 .max-h-screen {
   max-height: 100vh;
 }
+
 .min-h-\[24px\] {
   min-height: 24px;
 }
+
 .w-1 {
   width: 0.25rem;
 }
+
 .w-1\.5 {
   width: 0.375rem;
 }
+
 .w-1\/2 {
   width: 50%;
 }
+
 .w-10 {
   width: 2.5rem;
 }
+
 .w-12 {
   width: 3rem;
 }
+
 .w-14 {
   width: 3.5rem;
 }
+
 .w-16 {
   width: 4rem;
 }
+
 .w-2 {
   width: 0.5rem;
 }
+
 .w-2\.5 {
   width: 0.625rem;
 }
+
 .w-4 {
   width: 1rem;
 }
+
 .w-5 {
   width: 1.25rem;
 }
+
 .w-6 {
   width: 1.5rem;
 }
+
 .w-7 {
   width: 1.75rem;
 }
+
 .w-8 {
   width: 2rem;
 }
+
 .w-\[138px\] {
   width: 138px;
 }
+
 .w-\[140px\] {
   width: 140px;
 }
+
 .w-\[154px\] {
   width: 154px;
 }
+
 .w-\[1px\] {
   width: 1px;
 }
+
 .w-\[22px\] {
   width: 22px;
 }
+
 .w-\[327px\] {
   width: 327px;
 }
+
 .w-\[40px\] {
   width: 40px;
 }
+
 .w-auto {
   width: auto;
 }
+
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
 }
+
 .w-full {
   width: 100%;
 }
+
 .w-max {
   width: -moz-max-content;
   width: max-content;
 }
+
 .min-w-0 {
   min-width: 0px;
 }
+
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
+
 .min-w-\[fit-content\] {
   min-width: -moz-fit-content;
   min-width: fit-content;
 }
+
 .max-w-\[200px\] {
   max-width: 200px;
 }
+
 .max-w-full {
   max-width: 100%;
 }
+
 .max-w-lg {
   max-width: 32rem;
 }
+
 .max-w-xs {
   max-width: 20rem;
 }
+
 .flex-1 {
   flex: 1 1 0%;
 }
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
+
 .shrink-0 {
   flex-shrink: 0;
 }
+
 .flex-grow {
   flex-grow: 1;
 }
+
 .grow {
   flex-grow: 1;
 }
+
 .grow-0 {
   flex-grow: 0;
 }
+
 .basis-full {
   flex-basis: 100%;
 }
+
 .origin-\[0\] {
   transform-origin: 0;
 }
+
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .-translate-y-1\/2 {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .translate-x-\[-50\%\] {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .translate-y-0 {
   --tw-translate-y: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .translate-y-\[-10px\] {
   --tw-translate-y: -10px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .translate-y-\[-50\%\] {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .rotate-45 {
   --tw-rotate: 45deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .rotate-90 {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-@keyframes pulse {
 
+@keyframes pulse {
   50% {
     opacity: .5;
   }
 }
+
 .animate-pulse {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
-@keyframes spin {
 
+@keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }
+
 .animate-spin {
   animation: spin 1s linear infinite;
 }
+
 .cursor-default {
   cursor: default;
 }
+
 .cursor-pointer {
   cursor: pointer;
 }
+
 .touch-none {
   touch-action: none;
 }
+
 .select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
+
 .resize-none {
   resize: none;
 }
+
 .resize {
   resize: both;
 }
+
 .columns-1 {
   -moz-columns: 1;
        columns: 1;
 }
+
 .columns-2 {
   -moz-columns: 2;
        columns: 2;
 }
+
 .columns-3 {
   -moz-columns: 3;
        columns: 3;
 }
+
 .grid-flow-col {
   grid-auto-flow: column;
 }
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+
 .grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
+
 .grid-cols-\[auto\2c auto\2c 1fr\] {
   grid-template-columns: auto auto 1fr;
 }
+
 .grid-cols-\[auto_1fr_auto\] {
   grid-template-columns: auto 1fr auto;
 }
+
 .flex-row {
   flex-direction: row;
 }
+
 .flex-row-reverse {
   flex-direction: row-reverse;
 }
+
 .flex-col {
   flex-direction: column;
 }
+
 .flex-col-reverse {
   flex-direction: column-reverse;
 }
+
 .flex-wrap {
   flex-wrap: wrap;
 }
+
 .items-start {
   align-items: flex-start;
 }
+
 .items-center {
   align-items: center;
 }
-.\!justify-start {
-  justify-content: flex-start !important;
-}
+
 .justify-start {
   justify-content: flex-start;
 }
-.\!justify-end {
-  justify-content: flex-end !important;
-}
+
 .justify-end {
   justify-content: flex-end;
 }
-.\!justify-center {
-  justify-content: center !important;
-}
+
 .justify-center {
   justify-content: center;
 }
+
 .justify-between {
   justify-content: space-between;
 }
+
 .gap-0 {
   gap: 0px;
 }
+
 .gap-1 {
   gap: 0.25rem;
 }
+
 .gap-2 {
   gap: 0.5rem;
 }
+
 .gap-4 {
   gap: 1rem;
 }
+
 .gap-\[7px\] {
   gap: 7px;
 }
+
 .gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
 }
+
 .gap-x-\[7px\] {
   -moz-column-gap: 7px;
        column-gap: 7px;
 }
+
 .gap-y-2 {
   row-gap: 0.5rem;
 }
+
 .gap-y-4 {
   row-gap: 1rem;
 }
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+
 .self-start {
   align-self: flex-start;
 }
+
 .self-center {
   align-self: center;
 }
+
 .self-stretch {
   align-self: stretch;
 }
+
 .overflow-hidden {
   overflow: hidden;
 }
+
 .overflow-scroll {
   overflow: scroll;
 }
+
 .overflow-x-auto {
   overflow-x: auto;
 }
+
 .overflow-y-auto {
   overflow-y: auto;
 }
+
 .overflow-y-hidden {
   overflow-y: hidden;
 }
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 .text-ellipsis {
   text-overflow: ellipsis;
 }
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
-.break-words {
-  overflow-wrap: break-word;
-}
+
 .rounded {
   border-radius: 0.25rem;
 }
+
 .rounded-2xl {
   border-radius: 1rem;
 }
+
 .rounded-\[4px\] {
   border-radius: 4px;
 }
+
 .rounded-\[inherit\] {
   border-radius: inherit;
 }
+
 .rounded-full {
   border-radius: 9999px;
 }
+
 .rounded-md {
   border-radius: calc(var(--radius) - 2px);
 }
+
 .rounded-none {
   border-radius: 0px;
 }
+
 .rounded-sm {
   border-radius: calc(var(--radius) - 4px);
 }
+
 .rounded-b-lg {
   border-bottom-right-radius: var(--radius);
   border-bottom-left-radius: var(--radius);
 }
+
 .rounded-t-2xl {
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
 }
+
 .rounded-bl {
   border-bottom-left-radius: 0.25rem;
 }
+
 .rounded-bl-2xl {
   border-bottom-left-radius: 1rem;
 }
+
 .rounded-br {
   border-bottom-right-radius: 0.25rem;
 }
+
 .rounded-br-2xl {
   border-bottom-right-radius: 1rem;
 }
+
 .rounded-tl {
   border-top-left-radius: 0.25rem;
 }
+
 .rounded-tl-2xl {
   border-top-left-radius: 1rem;
 }
+
 .rounded-tr {
   border-top-right-radius: 0.25rem;
 }
+
 .rounded-tr-2xl {
   border-top-right-radius: 1rem;
 }
+
 .border {
   border-width: 1px;
 }
+
 .border-0 {
   border-width: 0px;
 }
+
 .border-2 {
   border-width: 2px;
 }
+
 .border-\[1px\] {
   border-width: 1px;
 }
+
 .border-b {
   border-bottom-width: 1px;
 }
+
 .border-l {
   border-left-width: 1px;
 }
+
 .border-t {
   border-top-width: 1px;
 }
+
 .border-t-\[0px\] {
   border-top-width: 0px;
 }
+
 .border-none {
   border-style: none;
 }
+
 .\!border-stateColors-error {
   border-color: var(--stateColors-error) !important;
 }
+
 .border-\[\#000\] {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
+
 .border-\[\#E3E3E3\] {
   --tw-border-opacity: 1;
   border-color: rgb(227 227 227 / var(--tw-border-opacity));
 }
+
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
+
 .border-buttonColors-primaryOutlineColor {
   border-color: var(--buttonColors-primaryOutlineColor);
 }
+
 .border-buttonColors-secondaryOutlineColor {
   border-color: var(--buttonColors-secondaryOutlineColor);
 }
+
 .border-coreColors-brandColorPrimary {
   border-color: var(--coreColors-brandColorPrimary);
 }
+
 .border-coreColors-dividingLines {
   border-color: var(--coreColors-dividingLines);
 }
+
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
+
 .border-input {
   border-color: hsl(var(--input));
 }
+
 .border-stateColors-error {
   border-color: var(--stateColors-error);
 }
+
 .border-transparent {
   border-color: transparent;
 }
+
 .border-l-transparent {
   border-left-color: transparent;
 }
+
 .border-t-transparent {
   border-top-color: transparent;
 }
+
 .bg-\[\#612EFF\] {
   --tw-bg-opacity: 1;
   background-color: rgb(97 46 255 / var(--tw-bg-opacity));
 }
+
 .bg-\[\#FFFFFF\] {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
+
 .bg-background {
   background-color: hsl(var(--background));
 }
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
+
 .bg-black\/80 {
   background-color: rgb(0 0 0 / 0.8);
 }
+
 .bg-border {
   background-color: hsl(var(--border));
 }
+
 .bg-buttonColors-primaryFill {
   background-color: var(--buttonColors-primaryFill);
 }
+
 .bg-buttonColors-secondaryFill {
   background-color: var(--buttonColors-secondaryFill);
 }
+
 .bg-coreColors-brandColorPrimary {
   background-color: var(--coreColors-brandColorPrimary);
 }
+
 .bg-coreColors-dividingLines {
   background-color: var(--coreColors-dividingLines);
 }
+
 .bg-coreColors-inputBackground {
   background-color: var(--coreColors-inputBackground);
 }
+
 .bg-coreColors-modalBackground {
   background-color: var(--coreColors-modalBackground);
 }
+
 .bg-coreColors-pageColor {
   background-color: var(--coreColors-pageColor);
 }
+
 .bg-gray-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
+
 .bg-productBadging-fill {
   background-color: var(--productBadging-fill);
 }
+
 .bg-stateColors-disabled {
   background-color: var(--stateColors-disabled);
 }
+
 .bg-stateColors-error {
   background-color: var(--stateColors-error);
 }
+
 .bg-stateColors-skeleton {
   background-color: var(--stateColors-skeleton);
 }
+
 .bg-stateColors-success {
   background-color: var(--stateColors-success);
 }
+
 .bg-stateColors-warning {
   background-color: var(--stateColors-warning);
 }
+
 .bg-transparent {
   background-color: transparent;
 }
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
+
 .bg-fade-left {
   background-image: linear-gradient(to right, var(--coreColors-pageColor) 0%, #ffffff00 100%);;
 }
+
 .bg-fade-right {
   background-image: linear-gradient(to left, var(--coreColors-pageColor) 0%, #ffffff00 100%);;
 }
+
 .bg-contain {
   background-size: contain;
 }
+
 .fill-current {
   fill: currentColor;
 }
+
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
 }
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
 }
+
 .p-0 {
   padding: 0px;
 }
+
 .p-1 {
   padding: 0.25rem;
 }
+
 .p-2 {
   padding: 0.5rem;
 }
+
 .p-3 {
   padding: 0.75rem;
 }
+
 .p-4 {
   padding: 1rem;
 }
+
 .p-6 {
   padding: 1.5rem;
 }
+
 .p-\[1px\] {
   padding: 1px;
 }
+
 .\!px-0 {
   padding-left: 0px !important;
   padding-right: 0px !important;
 }
+
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
 }
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+
 .px-2\.5 {
   padding-left: 0.625rem;
   padding-right: 0.625rem;
 }
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
+
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
+
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
 }
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
+
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
+
 .pb-4 {
   padding-bottom: 1rem;
 }
+
 .pb-8 {
   padding-bottom: 2rem;
 }
+
 .pl-0 {
   padding-left: 0px;
 }
+
 .pl-10 {
   padding-left: 2.5rem;
 }
+
 .pl-2 {
   padding-left: 0.5rem;
 }
+
 .pl-4 {
   padding-left: 1rem;
 }
+
 .pl-8 {
   padding-left: 2rem;
 }
+
 .pr-0 {
   padding-right: 0px;
 }
+
 .pr-1 {
   padding-right: 0.25rem;
 }
+
 .pr-2 {
   padding-right: 0.5rem;
 }
+
 .pr-4 {
   padding-right: 1rem;
 }
+
 .pr-6 {
   padding-right: 1.5rem;
 }
+
 .pt-0 {
   padding-top: 0px;
 }
+
 .pt-12 {
   padding-top: 3rem;
 }
+
 .pt-2 {
   padding-top: 0.5rem;
 }
+
 .pt-4 {
   padding-top: 1rem;
 }
+
 .pt-5 {
   padding-top: 1.25rem;
 }
+
 .pt-6 {
   padding-top: 1.5rem;
 }
+
 .text-left {
   text-align: left;
 }
+
 .text-center {
   text-align: center;
 }
+
 .text-right {
   text-align: right;
 }
+
 .text-start {
   text-align: start;
 }
+
 .align-top {
   vertical-align: top;
 }
+
 .font-fontRegular {
   font-family: var(--fontRegular);
 }
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
 }
+
 .text-5xl {
   font-size: 3rem;
   line-height: 1;
 }
+
 .text-\[10px\] {
   font-size: 10px;
 }
+
 .text-\[12px\] {
   font-size: 12px;
 }
+
 .text-\[14px\] {
   font-size: 14px;
 }
+
 .text-\[15px\] {
   font-size: 15px;
 }
+
 .text-\[18px\] {
   font-size: 18px;
 }
+
 .text-\[23px\] {
   font-size: 23px;
 }
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
 }
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+
 .font-medium {
   font-weight: 500;
 }
+
 .font-normal {
   font-weight: 400;
 }
+
 .font-semibold {
   font-weight: 600;
 }
+
 .uppercase {
   text-transform: uppercase;
 }
+
 .lowercase {
   text-transform: lowercase;
 }
+
 .capitalize {
   text-transform: capitalize;
 }
+
 .leading-6 {
   line-height: 1.5rem;
 }
+
 .leading-\[130\%\] {
   line-height: 130%;
 }
+
 .leading-\[13px\] {
   line-height: 13px;
 }
+
 .leading-\[160\%\] {
   line-height: 160%;
 }
+
 .leading-\[24px\] {
   line-height: 24px;
 }
+
 .leading-none {
   line-height: 1;
 }
+
 .text-\[\#727272\] {
   --tw-text-opacity: 1;
   color: rgb(114 114 114 / var(--tw-text-opacity));
 }
+
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
+
 .text-buttonColors-destructiveText {
   color: var(--buttonColors-destructiveText);
 }
+
 .text-buttonColors-disabled {
   color: var(--buttonColors-disabled);
 }
+
 .text-buttonColors-primaryFill {
   color: var(--buttonColors-primaryFill);
 }
+
 .text-buttonColors-primaryOutline {
   color: var(--buttonColors-primaryOutline);
 }
+
 .text-buttonColors-primaryOutlineColor {
   color: var(--buttonColors-primaryOutlineColor);
 }
+
 .text-buttonColors-primaryOutlineEnabled {
   color: var(--buttonColors-primaryOutlineEnabled);
 }
+
 .text-buttonColors-primaryShadow {
   color: var(--buttonColors-primaryShadow);
 }
+
 .text-buttonColors-primaryText {
   color: var(--buttonColors-primaryText);
 }
+
 .text-buttonColors-secondaryFill {
   color: var(--buttonColors-secondaryFill);
 }
+
 .text-buttonColors-secondaryOutline {
   color: var(--buttonColors-secondaryOutline);
 }
+
 .text-buttonColors-secondaryOutlineColor {
   color: var(--buttonColors-secondaryOutlineColor);
 }
+
 .text-buttonColors-secondaryOutlineEnabled {
   color: var(--buttonColors-secondaryOutlineEnabled);
 }
+
 .text-buttonColors-secondaryShadow {
   color: var(--buttonColors-secondaryShadow);
 }
+
 .text-buttonColors-secondaryText {
   color: var(--buttonColors-secondaryText);
 }
+
 .text-coreColors-brandColorPrimary {
   color: var(--coreColors-brandColorPrimary);
 }
+
 .text-coreColors-dividingLines {
   color: var(--coreColors-dividingLines);
 }
+
 .text-coreColors-headerBackground {
   color: var(--coreColors-headerBackground);
 }
+
 .text-coreColors-headerIcon {
   color: var(--coreColors-headerIcon);
 }
+
 .text-coreColors-inputBackground {
   color: var(--coreColors-inputBackground);
 }
+
 .text-coreColors-modalBackground {
   color: var(--coreColors-modalBackground);
 }
+
 .text-coreColors-pageColor {
   color: var(--coreColors-pageColor);
 }
+
 .text-coreColors-primaryIcon {
   color: var(--coreColors-primaryIcon);
 }
+
 .text-coreColors-secondaryIcon {
   color: var(--coreColors-secondaryIcon);
 }
+
 .text-coreColors-shadow {
   color: var(--coreColors-shadow);
 }
+
 .text-coreColors-shadowsEnabled {
   color: var(--coreColors-shadowsEnabled);
 }
+
 .text-coreColors-tabBar {
   color: var(--coreColors-tabBar);
 }
+
 .text-current {
   color: currentColor;
 }
+
 .text-foreground\/50 {
   color: hsl(var(--foreground) / 0.5);
 }
+
 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
+
 .text-productBadging-text {
   color: var(--productBadging-text);
 }
+
 .text-stateColors-disabled {
   color: var(--stateColors-disabled);
 }
+
 .text-stateColors-error {
   color: var(--stateColors-error);
 }
+
 .text-stateColors-favorites {
   color: var(--stateColors-favorites);
 }
+
 .text-stateColors-reviews {
   color: var(--stateColors-reviews);
 }
+
 .text-stateColors-skeleton {
   color: var(--stateColors-skeleton);
 }
+
 .text-stateColors-subscriptions {
   color: var(--stateColors-subscriptions);
 }
+
 .text-stateColors-success {
   color: var(--stateColors-success);
 }
+
 .text-stateColors-warning {
   color: var(--stateColors-warning);
 }
+
 .text-textColors-legalText {
   color: var(--textColors-legalText);
 }
+
 .text-textColors-pageTitle {
   color: var(--textColors-pageTitle);
 }
+
 .text-textColors-priceText {
   color: var(--textColors-priceText);
 }
+
 .text-textColors-primaryColor {
   color: var(--textColors-primaryColor, #121212ff);
 }
+
 .text-textColors-productTitle {
   color: var(--textColors-productTitle);
 }
+
 .text-textColors-salePriceText {
   color: var(--textColors-salePriceText);
 }
+
 .text-textColors-secondaryColor {
   color: var(--textColors-secondaryColor, #727272ff);
 }
+
 .text-textColors-strikethroughPriceText {
   color: var(--textColors-strikethroughPriceText);
 }
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+
 .line-through {
   text-decoration-line: line-through;
 }
+
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
+
 .opacity-0 {
   opacity: 0;
 }
+
 .opacity-100 {
   opacity: 1;
 }
+
 .opacity-50 {
   opacity: 0.5;
 }
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-\[0_0_6px_0_rgba\(17\2c 17\2c 17\2c 0\.16\)\] {
   --tw-shadow: 0 0 6px 0 rgba(17,17,17,0.16);
   --tw-shadow-colored: 0 0 6px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-primary {
   --tw-shadow: calc(var(--buttonColors-primaryShadowEnabled) * 0px) calc(var(--buttonColors-primaryShadowEnabled) * 5px) calc(var(--buttonColors-primaryShadowEnabled) * 25px) calc(var(--buttonColors-primaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
   --tw-shadow-colored: calc(var(--buttonColors-primaryShadowEnabled) * 0px) calc(var(--buttonColors-primaryShadowEnabled) * 5px) calc(var(--buttonColors-primaryShadowEnabled) * 25px) calc(var(--buttonColors-primaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-secondary {
   --tw-shadow: calc(var(--buttonColors-secondaryShadowEnabled) * 0px) calc(var(--buttonColors-secondaryShadowEnabled) * 5px) calc(var(--buttonColors-secondaryShadowEnabled) * 25px) calc(var(--buttonColors-secondaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
   --tw-shadow-colored: calc(var(--buttonColors-secondaryShadowEnabled) * 0px) calc(var(--buttonColors-secondaryShadowEnabled) * 5px) calc(var(--buttonColors-secondaryShadowEnabled) * 25px) calc(var(--buttonColors-secondaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
 .shadow-buttonColors-primaryShadow {
   --tw-shadow-color: var(--buttonColors-primaryShadow);
   --tw-shadow: var(--tw-shadow-colored);
 }
+
 .shadow-primary {
   --tw-shadow-color: hsl(var(--primary));
   --tw-shadow: var(--tw-shadow-colored);
 }
+
 .shadow-secondary {
   --tw-shadow-color: hsl(var(--secondary));
   --tw-shadow: var(--tw-shadow-colored);
 }
+
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+
 .outline {
   outline-style: solid;
 }
+
 .outline-0 {
   outline-width: 0px;
 }
+
 .outline-1 {
   outline-width: 1px;
 }
+
 .outline-coreColors-brandColorPrimary {
   outline-color: var(--coreColors-brandColorPrimary);
 }
+
 .outline-coreColors-dividingLines {
   outline-color: var(--coreColors-dividingLines);
 }
+
 .outline-stateColors-error {
   outline-color: var(--stateColors-error);
 }
+
 .outline-stateColors-skeleton {
   outline-color: var(--stateColors-skeleton);
 }
+
 .outline-transparent {
   outline-color: transparent;
 }
+
 .ring-0 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
+
 .drop-shadow-\[0_3px_1px_0_rgba\(0\2c 0\2c 0\2c 1\)\] {
   --tw-drop-shadow: drop-shadow(0 3px 1px 0 rgba(0,0,0,1));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -2123,88 +2566,108 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 .transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 .duration-150 {
   transition-duration: 150ms;
 }
+
 .duration-200 {
   transition-duration: 200ms;
 }
+
 .duration-300 {
   transition-duration: 300ms;
 }
+
 .duration-500 {
   transition-duration: 500ms;
 }
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-@keyframes enter {
 
+@keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);
     transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
   }
 }
-@keyframes exit {
 
+@keyframes exit {
   to {
     opacity: var(--tw-exit-opacity, 1);
     transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
   }
 }
+
 .duration-150 {
   animation-duration: 150ms;
 }
+
 .duration-200 {
   animation-duration: 200ms;
 }
+
 .duration-300 {
   animation-duration: 300ms;
 }
+
 .duration-500 {
   animation-duration: 500ms;
 }
+
 .ease-in-out {
   animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
+
 .container {
-    padding-right: 16px;
-    padding-left: 16px;
-  }
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
 *:hover {
-    text-decoration-line: unset !important;
-  }
+  text-decoration-line: unset !important;
+}
+
 .\[-ms-overflow-style\:none\] {
   -ms-overflow-style: none;
 }
+
 .\[scrollbar-width\:none\] {
   scrollbar-width: none;
 }
 
 body::-webkit-scrollbar {
   display: none;
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }
 
 .gradient-right::before,
@@ -2595,7 +3058,6 @@ body::-webkit-scrollbar {
 }
 
 @keyframes accordion-up {
-
   from {
     height: var(--radix-accordion-content-height);
   }
@@ -2610,7 +3072,6 @@ body::-webkit-scrollbar {
 }
 
 @keyframes accordion-down {
-
   from {
     height: 0;
   }
@@ -2751,7 +3212,6 @@ body::-webkit-scrollbar {
 }
 
 @media (min-width: 640px) {
-
   .sm\:mt-0 {
     margin-top: 0px;
   }