stubbed mock shop creation route

styles/index.css

@@ -195,6 +195,9 @@
   .col-3 {
     grid-column: 3;
   }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -234,12 +237,6 @@
   .my-\[1rem\] {
     margin-block: 1rem;
   }
-  .my-\[2em\] {
-    margin-block: 2em;
-  }
-  .my-\[5em\] {
-    margin-block: 5em;
-  }
   .mt-\[0\.25em\] {
     margin-top: 0.25em;
   }
@@ -336,6 +333,12 @@
   .basis-full {
     flex-basis: 100%;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -354,15 +357,27 @@
   .list-none {
     list-style-type: none;
   }
+  .grid-cols-\[1fr_1fr\] {
+    grid-template-columns: 1fr 1fr;
+  }
   .grid-cols-\[2fr_8fr_2fr\] {
     grid-template-columns: 2fr 8fr 2fr;
   }
   .grid-cols-\[6rem_10fr_6rem\] {
     grid-template-columns: 6rem 10fr 6rem;
   }
+  .grid-cols-\[max-content_1fr\] {
+    grid-template-columns: max-content 1fr;
+  }
   .grid-cols-\[max-content_max-content\] {
     grid-template-columns: max-content max-content;
   }
+  .grid-rows-\[auto\] {
+    grid-template-rows: auto;
+  }
+  .grid-rows-\[auto_auto_auto\] {
+    grid-template-rows: auto auto auto;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -381,6 +396,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-\[0\.5em\] {
+    gap: 0.5em;
+  }
   .gap-\[0\.25em\] {
     gap: 0.25em;
   }
@@ -421,18 +439,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-\[0\.5px\] {
-    border-style: var(--tw-border-style);
-    border-width: 0.5px;
-  }
   .border-\[1px\] {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-\[10px\] {
-    border-style: var(--tw-border-style);
-    border-width: 10px;
-  }
   .border-b-\[2px\] {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
@@ -484,6 +494,9 @@
   .py-\[0\.5em\] {
     padding-block: 0.5em;
   }
+  .py-\[1em\] {
+    padding-block: 1em;
+  }
   .pt-\[1em\] {
     padding-top: 1em;
   }
@@ -505,6 +518,9 @@
   .font-display {
     font-family: var(--display-family);
   }
+  .font-text {
+    font-family: var(--text-family);
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -532,6 +548,9 @@
   .text-nowrap {
     text-wrap: nowrap;
   }
+  .text-wrap {
+    text-wrap: wrap;
+  }
   .capitalize {
     text-transform: capitalize;
   }
@@ -541,6 +560,10 @@
   .underline {
     text-decoration-line: underline;
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .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,);
   }
@@ -663,11 +686,6 @@
       margin-bottom: 1em;
     }
   }
-  .open\:mb-\[2em\] {
-    &:is([open], :popover-open, :open) {
-      margin-bottom: 2em;
-    }
-  }
   .open\:grid {
     &:is([open], :popover-open, :open) {
       display: grid;
@@ -679,11 +697,6 @@
       border-bottom-width: 1px;
     }
   }
-  .open\:border-b-accent {
-    &:is([open], :popover-open, :open) {
-      border-bottom-color: var(--accent);
-    }
-  }
   .open\:border-b-background {
     &:is([open], :popover-open, :open) {
       border-bottom-color: var(--background);
@@ -694,11 +707,6 @@
       padding-bottom: 1em;
     }
   }
-  .open\:pb-\[2em\] {
-    &:is([open], :popover-open, :open) {
-      padding-bottom: 2em;
-    }
-  }
   .open\:details-content\:transform-\[translate\(0px\,0px\)\] {
     &:is([open], :popover-open, :open) {
       &::details-content {
@@ -1131,6 +1139,26 @@
     }
   }
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1140,6 +1168,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1208,26 +1241,6 @@
   inherits: false;
   initial-value: 1;
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
@@ -1245,8 +1258,14 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-font-weight: initial;
+      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;
@@ -1263,11 +1282,6 @@
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
       --tw-content: "";
       --tw-leading: initial;
     }