Merge branch 'release' into development

# Conflicts:
#	src/pages/shop/product/variant/[slug].jsx

41 files changed, 873 insertions, 0 deletions

diff --git a/src-migrate/styles/fonts/Inter/Inter-Black.woff b/src-migrate/styles/fonts/Inter/Inter-Black.woff
new file mode 100644
index 00000000..a18593a0
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-Black.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-Black.woff2 b/src-migrate/styles/fonts/Inter/Inter-Black.woff2
new file mode 100644
index 00000000..68f64c9e
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-Black.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-BlackItalic.woff b/src-migrate/styles/fonts/Inter/Inter-BlackItalic.woff
new file mode 100644
index 00000000..b6b01943
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-BlackItalic.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-BlackItalic.woff2 b/src-migrate/styles/fonts/Inter/Inter-BlackItalic.woff2
new file mode 100644
index 00000000..1c9c7ca8
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-BlackItalic.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-Bold.woff b/src-migrate/styles/fonts/Inter/Inter-Bold.woff
new file mode 100644
index 00000000..eaf3d4bf
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-Bold.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-Bold.woff2 b/src-migrate/styles/fonts/Inter/Inter-Bold.woff2
new file mode 100644
index 00000000..2846f29c
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-Bold.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-BoldItalic.woff b/src-migrate/styles/fonts/Inter/Inter-BoldItalic.woff
new file mode 100644
index 00000000..32750761
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-BoldItalic.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-BoldItalic.woff2 b/src-migrate/styles/fonts/Inter/Inter-BoldItalic.woff2
new file mode 100644
index 00000000..0b1fe8e1
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-BoldItalic.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-ExtraBold.woff b/src-migrate/styles/fonts/Inter/Inter-ExtraBold.woff
new file mode 100644
index 00000000..c2c17ede
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-ExtraBold.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-ExtraBold.woff2 b/src-migrate/styles/fonts/Inter/Inter-ExtraBold.woff2
new file mode 100644
index 00000000..c24c2bdc
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-ExtraBold.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-ExtraBoldItalic.woff b/src-migrate/styles/fonts/Inter/Inter-ExtraBoldItalic.woff
new file mode 100644
index 00000000..c42f7052
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-ExtraBoldItalic.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-ExtraBoldItalic.woff2 b/src-migrate/styles/fonts/Inter/Inter-ExtraBoldItalic.woff2
new file mode 100644
index 00000000..4a81dc79
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-ExtraBoldItalic.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-ExtraLight.woff b/src-migrate/styles/fonts/Inter/Inter-ExtraLight.woff
new file mode 100644
index 00000000..d0de5f39
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-ExtraLight.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-ExtraLight.woff2 b/src-migrate/styles/fonts/Inter/Inter-ExtraLight.woff2
new file mode 100644
index 00000000..f2ea706f
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-ExtraLight.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-ExtraLightItalic.woff b/src-migrate/styles/fonts/Inter/Inter-ExtraLightItalic.woff
new file mode 100644
index 00000000..81f1a28e
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-ExtraLightItalic.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-ExtraLightItalic.woff2 b/src-migrate/styles/fonts/Inter/Inter-ExtraLightItalic.woff2
new file mode 100644
index 00000000..9af717ba
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-ExtraLightItalic.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-Italic.woff b/src-migrate/styles/fonts/Inter/Inter-Italic.woff
new file mode 100644
index 00000000..a806b382
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-Italic.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-Italic.woff2 b/src-migrate/styles/fonts/Inter/Inter-Italic.woff2
new file mode 100644
index 00000000..a619fc54
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-Italic.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-Light.woff b/src-migrate/styles/fonts/Inter/Inter-Light.woff
new file mode 100644
index 00000000..c496464d
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-Light.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-Light.woff2 b/src-migrate/styles/fonts/Inter/Inter-Light.woff2
new file mode 100644
index 00000000..bc4be665
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-Light.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-LightItalic.woff b/src-migrate/styles/fonts/Inter/Inter-LightItalic.woff
new file mode 100644
index 00000000..f84a9de3
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-LightItalic.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-LightItalic.woff2 b/src-migrate/styles/fonts/Inter/Inter-LightItalic.woff2
new file mode 100644
index 00000000..842b2dfc
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-LightItalic.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-Medium.woff b/src-migrate/styles/fonts/Inter/Inter-Medium.woff
new file mode 100644
index 00000000..d546843f
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-Medium.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-Medium.woff2 b/src-migrate/styles/fonts/Inter/Inter-Medium.woff2
new file mode 100644
index 00000000..f92498a2
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-Medium.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-MediumItalic.woff b/src-migrate/styles/fonts/Inter/Inter-MediumItalic.woff
new file mode 100644
index 00000000..459a6568
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-MediumItalic.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-MediumItalic.woff2 b/src-migrate/styles/fonts/Inter/Inter-MediumItalic.woff2
new file mode 100644
index 00000000..0e3019f4
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-MediumItalic.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-Regular.woff b/src-migrate/styles/fonts/Inter/Inter-Regular.woff
new file mode 100644
index 00000000..62d3a618
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-Regular.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-Regular.woff2 b/src-migrate/styles/fonts/Inter/Inter-Regular.woff2
new file mode 100644
index 00000000..6c2b6893
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-Regular.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-SemiBold.woff b/src-migrate/styles/fonts/Inter/Inter-SemiBold.woff
new file mode 100644
index 00000000..a815f43a
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-SemiBold.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-SemiBold.woff2 b/src-migrate/styles/fonts/Inter/Inter-SemiBold.woff2
new file mode 100644
index 00000000..611e90c9
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-SemiBold.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-SemiBoldItalic.woff b/src-migrate/styles/fonts/Inter/Inter-SemiBoldItalic.woff
new file mode 100644
index 00000000..909e43a9
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-SemiBoldItalic.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-SemiBoldItalic.woff2 b/src-migrate/styles/fonts/Inter/Inter-SemiBoldItalic.woff2
new file mode 100644
index 00000000..545685bd
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-SemiBoldItalic.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-Thin.woff b/src-migrate/styles/fonts/Inter/Inter-Thin.woff
new file mode 100644
index 00000000..62bc58cd
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-Thin.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-Thin.woff2 b/src-migrate/styles/fonts/Inter/Inter-Thin.woff2
new file mode 100644
index 00000000..abbc3a5c
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-Thin.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-ThinItalic.woff b/src-migrate/styles/fonts/Inter/Inter-ThinItalic.woff
new file mode 100644
index 00000000..700a7f06
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-ThinItalic.woff
diff --git a/src-migrate/styles/fonts/Inter/Inter-ThinItalic.woff2 b/src-migrate/styles/fonts/Inter/Inter-ThinItalic.woff2
new file mode 100644
index 00000000..ab0b2002
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-ThinItalic.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-italic.var.woff2 b/src-migrate/styles/fonts/Inter/Inter-italic.var.woff2
new file mode 100644
index 00000000..b826d5af
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-italic.var.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter-roman.var.woff2 b/src-migrate/styles/fonts/Inter/Inter-roman.var.woff2
new file mode 100644
index 00000000..6a256a06
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter-roman.var.woff2
diff --git a/src-migrate/styles/fonts/Inter/Inter.var.woff2 b/src-migrate/styles/fonts/Inter/Inter.var.woff2
new file mode 100644
index 00000000..365eedc5
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/Inter.var.woff2
diff --git a/src-migrate/styles/fonts/Inter/inter.css b/src-migrate/styles/fonts/Inter/inter.css
new file mode 100644
index 00000000..de6ce273
--- /dev/null
+++ b/src-migrate/styles/fonts/Inter/inter.css
@@ -0,0 +1,199 @@
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url('Inter-Thin.woff2?v=3.19') format('woff2'),
+        url('Inter-Thin.woff?v=3.19') format('woff');
+}
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url('Inter-ThinItalic.woff2?v=3.19') format('woff2'),
+        url('Inter-ThinItalic.woff?v=3.19') format('woff');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: url('Inter-ExtraLight.woff2?v=3.19') format('woff2'),
+        url('Inter-ExtraLight.woff?v=3.19') format('woff');
+}
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 200;
+    font-display: swap;
+    src: url('Inter-ExtraLightItalic.woff2?v=3.19') format('woff2'),
+        url('Inter-ExtraLightItalic.woff?v=3.19') format('woff');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url('Inter-Light.woff2?v=3.19') format('woff2'),
+        url('Inter-Light.woff?v=3.19') format('woff');
+}
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url('Inter-LightItalic.woff2?v=3.19') format('woff2'),
+        url('Inter-LightItalic.woff?v=3.19') format('woff');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('Inter-Regular.woff2?v=3.19') format('woff2'),
+        url('Inter-Regular.woff?v=3.19') format('woff');
+}
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url('Inter-Italic.woff2?v=3.19') format('woff2'),
+        url('Inter-Italic.woff?v=3.19') format('woff');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('Inter-Medium.woff2?v=3.19') format('woff2'),
+        url('Inter-Medium.woff?v=3.19') format('woff');
+}
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url('Inter-MediumItalic.woff2?v=3.19') format('woff2'),
+        url('Inter-MediumItalic.woff?v=3.19') format('woff');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('Inter-SemiBold.woff2?v=3.19') format('woff2'),
+        url('Inter-SemiBold.woff?v=3.19') format('woff');
+}
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url('Inter-SemiBoldItalic.woff2?v=3.19') format('woff2'),
+        url('Inter-SemiBoldItalic.woff?v=3.19') format('woff');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('Inter-Bold.woff2?v=3.19') format('woff2'),
+        url('Inter-Bold.woff?v=3.19') format('woff');
+}
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url('Inter-BoldItalic.woff2?v=3.19') format('woff2'),
+        url('Inter-BoldItalic.woff?v=3.19') format('woff');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: url('Inter-ExtraBold.woff2?v=3.19') format('woff2'),
+        url('Inter-ExtraBold.woff?v=3.19') format('woff');
+}
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 800;
+    font-display: swap;
+    src: url('Inter-ExtraBoldItalic.woff2?v=3.19') format('woff2'),
+        url('Inter-ExtraBoldItalic.woff?v=3.19') format('woff');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url('Inter-Black.woff2?v=3.19') format('woff2'),
+        url('Inter-Black.woff?v=3.19') format('woff');
+}
+@font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url('Inter-BlackItalic.woff2?v=3.19') format('woff2'),
+        url('Inter-BlackItalic.woff?v=3.19') format('woff');
+}
+
+/* -------------------------------------------------------
+Variable font.
+Usage:
+
+  html { font-family: 'Inter', sans-serif; }
+  @supports (font-variation-settings: normal) {
+    html { font-family: 'Inter var', sans-serif; }
+  }
+*/
+@font-face {
+    font-family: 'Inter var';
+    font-weight: 100 900;
+    font-display: swap;
+    font-style: normal;
+    font-named-instance: 'Regular';
+    src: url('Inter-roman.var.woff2?v=3.19') format('woff2');
+}
+@font-face {
+    font-family: 'Inter var';
+    font-weight: 100 900;
+    font-display: swap;
+    font-style: italic;
+    font-named-instance: 'Italic';
+    src: url('Inter-italic.var.woff2?v=3.19') format('woff2');
+}
+
+/* --------------------------------------------------------------------------
+[EXPERIMENTAL] Multi-axis, single variable font.
+
+Slant axis is not yet widely supported (as of February 2019) and thus this
+multi-axis single variable font is opt-in rather than the default.
+
+When using this, you will probably need to set font-variation-settings
+explicitly, e.g.
+
+  * { font-variation-settings: "slnt" 0deg }
+  .italic { font-variation-settings: "slnt" 10deg }
+
+*/
+@font-face {
+    font-family: 'Inter var experimental';
+    font-weight: 100 900;
+    font-display: swap;
+    font-style: oblique 0deg 10deg;
+    src: url('Inter.var.woff2?v=3.19') format('woff2');
+}
diff --git a/src-migrate/styles/globals.css b/src-migrate/styles/globals.css
new file mode 100644
index 00000000..ea20b247
--- /dev/null
+++ b/src-migrate/styles/globals.css
@@ -0,0 +1,674 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+    -webkit-tap-highlight-color: transparent;
+}
+
+html,
+body {
+    @apply w-screen
+        text-body-2
+        text-gray_r-12
+        bg-gray_r-1
+        overflow-x-clip;
+}
+
+#__next main {
+    @apply min-h-screen;
+}
+
+button {
+    @apply block;
+}
+
+@layer base {
+    input[type='number']::-webkit-inner-spin-button,
+    input[type='number']::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    input[type='number'] {
+        -moz-appearance: textfield;
+    }
+}
+
+@layer components {
+    .badge-red,
+    .badge-solid-red,
+    .badge-gray,
+    .badge-yellow,
+    .badge-blue,
+    .badge-green,
+    .badge-solid-green {
+        @apply text-[11px]
+            leading-none
+            font-medium
+            px-1
+            py-1
+            rounded
+            w-fit;
+    }
+
+    .badge-red {
+        @apply bg-danger-100
+            text-danger-600;
+    }
+
+    .badge-solid-red {
+        @apply bg-danger-500
+            text-white;
+    }
+
+    .badge-gray {
+        @apply bg-gray_r-5
+            text-gray_r-10;
+    }
+
+    .badge-yellow {
+        @apply bg-warning-500
+            text-warning-900;
+    }
+
+    .badge-blue {
+        @apply bg-blue-200
+            text-blue-600;
+    }
+
+    .badge-green {
+        @apply bg-success-100
+            text-success-600;
+    }
+
+    .badge-solid-green {
+        @apply bg-success-500
+            text-white;
+    }
+
+    .form-label {
+        @apply font-medium
+            block;
+    }
+
+    .form-input {
+        @apply p-3
+            rounded
+            border
+            text-gray_r-12
+            border-gray_r-7
+            !bg-white
+            bg-transparent
+            w-full
+            leading-none
+            focus:outline-none
+            focus:border-warning-500
+            disabled:bg-gray_r-5;
+    }
+
+    .form-input[aria-invalid] {
+        @apply border-danger-500
+            focus:border-danger-500;
+    }
+
+    .form-input[type='file'] {
+        @apply py-2;
+    }
+
+    .btn-yellow,
+    .btn-light,
+    .btn-red,
+    .btn-solid-red {
+        @apply block
+            w-fit
+            py-3
+            px-6
+            rounded
+            border
+            text-center
+            font-medium
+            ease-linear
+            duration-150;
+    }
+
+    .btn-yellow {
+        @apply bg-warning-500
+            border-warning-500
+            hover:bg-warning-500/80
+            disabled:text-gray_r-10
+            disabled:bg-warning-200
+            disabled:border-warning-200;
+    }
+
+    .btn-red {
+        @apply bg-danger-100
+            border-danger-300
+            text-danger-500
+            disabled:text-danger-400
+            disabled:bg-danger-200;
+    }
+
+    .btn-solid-red {
+        @apply bg-danger-500
+            border-danger-500
+            text-gray_r-1
+            hover:bg-danger-500/80
+            disabled:text-gray_r-1
+            disabled:bg-danger-200
+            disabled:border-danger-200;
+    }
+
+    .btn-light {
+        @apply bg-gray_r-3
+            border-gray_r-6
+            disabled:text-gray_r-10
+            disabled:bg-gray_r-6;
+    }
+
+    .product-card {
+        @apply w-full
+            h-full
+            border
+            border-gray_r-3
+            shadow
+            bg-white
+            rounded
+            relative
+            flex
+            flex-col;
+    }
+
+    .product-card__image {
+        @apply w-full
+            h-[160px]
+            object-contain
+            object-center
+            border-b
+            border-gray_r-6;
+    }
+
+    .product-card__content {
+        @apply p-2
+            pb-3
+            flex-1;
+    }
+
+    .product-card__title {
+        @apply text-caption-1
+            text-gray_r-12
+            leading-5;
+    }
+
+    .product-card__brand {
+        @apply text-caption-1
+            mb-1
+            block;
+    }
+
+    .product__description {
+        @apply text-gray_r-12/90;
+    }
+
+    .product__description br {
+        @apply block my-1;
+    }
+
+    .product__description b {
+        @apply font-semibold;
+    }
+}
+
+@layer utilities {
+    .wrap-line-ellipsis-1,
+    .wrap-line-ellipsis-2,
+    .wrap-line-ellipsis-3 {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .wrap-line-ellipsis-1 {
+        -webkit-line-clamp: 1;
+    }
+
+    .wrap-line-ellipsis-2 {
+        -webkit-line-clamp: 2;
+    }
+
+    .wrap-line-ellipsis-3 {
+        -webkit-line-clamp: 3;
+    }
+}
+
+.menu-wrapper {
+    @apply fixed
+        top-0
+        left-0
+        bg-white
+        w-[80%]
+        h-full
+        z-[60]
+        overflow-y-auto
+        translate-x-[-100%]
+        ease-linear
+        duration-150;
+}
+
+.menu-wrapper.active {
+    @apply translate-x-0;
+}
+
+.overlay {
+    @apply fixed
+        top-0
+        left-0
+        w-full
+        h-full
+        z-[55]
+        bg-gray_r-12/40;
+}
+
+.sticky-header {
+    @apply px-4
+        py-3
+        bg-gray_r-1/90
+        backdrop-blur-lg
+        sticky
+        top-0
+        border-b
+        border-gray_r-7
+        z-50;
+}
+
+.content-container {
+    @apply max-w-full
+        overflow-x-hidden;
+}
+
+#indoteknik_toast {
+    @apply fixed
+        bottom-4
+        translate-y-[200%]
+        left-[50%]
+        translate-x-[-50%]
+        z-[100]
+        flex
+        items-center
+        p-4
+        mb-4
+        w-[90%]
+        text-gray-500
+        bg-white
+        border
+        border-gray-300
+        rounded-lg
+        shadow
+        ease-linear
+        duration-300;
+}
+
+#indoteknik_toast.active {
+    @apply translate-y-0;
+}
+
+.category-menu {
+    @apply hidden;
+}
+
+.swiper-slide {
+    @apply !h-auto;
+}
+
+.lazy-load-image-background {
+    @apply !block
+        w-full;
+}
+
+.swiper-pagination-bullet-active {
+    @apply !bg-danger-500;
+}
+
+.pagination {
+    @apply flex
+        justify-center
+        gap-x-1;
+}
+
+.pagination-item {
+    @apply p-1
+        flex
+        justify-center
+        items-center
+        w-10
+        rounded 
+        ease-linear 
+        duration-150 
+        border
+        border-gray_r-6
+        bg-gray_r-3
+        hover:bg-gray_r-5 
+        text-gray_r-12;
+}
+
+.pagination-item--active {
+    @apply border-warning-500
+        bg-warning-500
+        hover:bg-warning-500;
+}
+
+.pagination-dots {
+    @apply p-1
+        flex
+        justify-center
+        items-end
+        w-10
+        rounded 
+        ease-linear 
+        bg-gray_r-3
+        text-caption-2;
+}
+
+.idt-transition {
+    @apply transition-all
+        ease-out
+        duration-200;
+}
+
+.form-select__placeholder {
+    @apply !text-gray_r-9;
+}
+
+.form-select__control {
+    @apply !shadow-none
+        !border-gray_r-7;
+}
+
+.form-select__control--menu-is-open {
+    @apply !border-warning-500;
+}
+
+.table-specification {
+    @apply max-h-[500px] overflow-y-auto border border-gray_r-6;
+}
+
+.table-specification > table {
+    @apply table-auto
+        border-collapse
+        w-full;
+}
+
+.table-specification > table > thead > tr > th:last-child {
+    @apply w-3/12;
+}
+
+.table-specification > table > thead {
+    @apply sticky top-0 border-b;
+}
+
+.table-specification > table > thead > tr {
+    @apply bg-gray_r-1/80 backdrop-blur-lg;
+}
+
+.table-specification th {
+    @apply font-semibold;
+}
+
+.table-specification th,
+.table-specification td {
+    @apply p-4 text-center;
+}
+
+.table-specification > table > tbody > tr {
+    @apply odd:bg-gray_r-3 even:bg-gray_r-1;
+}
+
+.table-cart,
+.table-checkout {
+    @apply w-full
+        table-auto
+        border-collapse;
+}
+
+.table-cart tr,
+.table-checkout tr {
+    @apply border-y 
+        border-gray_r-6
+        first:border-t-0;
+}
+
+.table-cart th,
+.table-cart td,
+.table-checkout th,
+.table-checkout td {
+    @apply py-4
+        px-3
+        text-center
+        text-gray_r-12/90;
+}
+
+.table-cart th,
+.table-cart td {
+    @apply first:w-12;
+}
+
+.table-cart th,
+.table-checkout th {
+    @apply font-medium;
+}
+
+.table-data {
+    @apply w-full
+    table-auto
+    border-collapse;
+}
+
+.table-data thead tr {
+    @apply bg-gray_r-3;
+}
+
+.table-data thead th {
+    @apply font-medium whitespace-nowrap;
+}
+
+.table-data thead th,
+.table-data tbody td {
+    @apply px-3 
+        py-4
+        text-center;
+}
+
+.table-data tbody td {
+    @apply text-gray_r-12/90;
+}
+
+.table-data tbody tr {
+    @apply border-b
+        border-gray_r-6;
+}
+
+.navbar-user-dropdown-button {
+    @apply flex-1
+        flex
+        gap-x-2
+        p-4
+        items-center
+        bg-danger-500
+        font-medium
+        !text-gray_r-1
+        rounded-none
+        rounded-t-xl;
+}
+
+.navbar-user-dropdown-button span {
+    @apply line-clamp-1;
+}
+
+.navbar-user-dropdown-wrapper a,
+.navbar-user-dropdown-wrapper button {
+    @apply text-gray_r-12/80 hover:bg-gray_r-5 font-medium py-2 px-4 w-full text-left;
+}
+
+.navbar-user-dropdown {
+    @apply bg-white
+        border
+        border-gray_r-6
+        py-2
+        w-full
+        shadow;
+}
+
+.category-mega-box-wrapper,
+.navbar-user-dropdown-wrapper {
+    @apply absolute
+        opacity-0
+        left-0
+        top-[125%]
+        flex
+        w-full
+        z-10
+        transition-all
+        ease-in
+        duration-200
+        pointer-events-none
+        text-left;
+}
+
+.category-mega-box-wrapper.show,
+.navbar-user-dropdown-button:hover ~ .navbar-user-dropdown-wrapper,
+.navbar-user-dropdown-wrapper:hover {
+    @apply top-[100%]
+        opacity-100
+        pointer-events-auto;
+}
+
+.category-mega-box {
+    @apply relative
+        py-2
+        border
+        border-t-0
+        bg-white
+        border-gray_r-6
+        h-full
+        w-full;
+}
+
+.category-mega-box > div {
+    @apply text-gray_r-12/80;
+}
+
+.category-mega-box > div:hover .category-mega-box__parent {
+    @apply bg-gray_r-5;
+}
+
+.category-mega-box > div:hover .category-mega-box__child-wrapper {
+    @apply opacity-100
+        top-0
+        pointer-events-auto;
+}
+
+.category-mega-box .category-mega-box__parent {
+    @apply py-2.5
+        px-4
+        text-gray_r-12/80
+        font-normal;
+}
+
+.category-mega-box__child-wrapper {
+    @apply absolute 
+        left-[100%] 
+        top-12
+        w-[40vw] 
+        bg-gray_r-1/90
+        backdrop-blur-md
+        border 
+        border-gray_r-6 
+        p-6 
+        opacity-0
+        h-full 
+        transition-all
+        ease-in
+        duration-200
+        pointer-events-none
+        z-50;
+}
+
+.category-mega-box__child-one {
+    @apply text-gray_r-12/80 
+        hover:text-danger-500 
+        transition-colors 
+        ease-linear 
+        duration-100 
+        font-semibold;
+}
+
+.category-mega-box__child-two {
+    @apply text-gray_r-12/80 
+        hover:text-danger-500 
+        transition-colors 
+        ease-linear 
+        duration-100 
+        font-normal;
+}
+
+@keyframes page-loader {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.page-loader {
+    animation-name: page-loader;
+    animation-duration: 1000ms;
+    animation-delay: 50ms;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+}
+
+@keyframes shake {
+    0% {
+        transform: translateX(0);
+    }
+    10%,
+    90% {
+        transform: translateX(-10px);
+    }
+    20%,
+    80% {
+        transform: translateX(10px);
+    }
+    30%,
+    50%,
+    70% {
+        transform: translateX(-10px);
+    }
+    40%,
+    60% {
+        transform: translateX(10px);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+
+.blink-color-flash-sale {
+    @apply text-body-1 md:text-title-sm;
+    transform: rotateY(180deg) rotateZ(120deg);
+    animation-name: blink-color-flash-sale;
+    animation-duration: 300ms;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes blink-color-flash-sale {
+    from {
+        @apply text-danger-500;
+    }
+    to {
+        @apply text-warning-500;
+    }
+}