@godaddy/gd-commerce-storefront 0.5.0 → 0.7.0

package/dist/styles.css

@@ -9,6 +9,12 @@
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -25,19 +31,17 @@
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
       --tw-duration: initial;
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      --tw-scale-z: 1;
+      --tw-ease: initial;
     }
   }
 .commerce-storefront, .commerce-storefront {
     --color-red-50: oklch(97.1% 0.013 17.38);
-    --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-800: oklch(44.4% 0.177 26.899);
-    --color-amber-800: oklch(47.3% 0.137 46.201);
+    --color-amber-50: oklch(98.7% 0.022 95.277);
+    --color-amber-900: oklch(41.4% 0.112 45.904);
     --color-neutral-950: oklch(14.5% 0 0);
     --spacing: 0.25rem;
-    --container-lg: 32rem;
+    --container-md: 28rem;
     --container-xl: 36rem;
     --container-3xl: 48rem;
     --text-xs: 0.75rem;
@@ -52,16 +56,17 @@
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
-    --text-5xl: 3rem;
-    --text-5xl--line-height: 1;
-    --text-6xl: 3.75rem;
-    --text-6xl--line-height: 1;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --tracking-tight: -0.025em;
     --leading-tight: 1.25;
+    --radius-sm: 0.25rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -130,6 +135,9 @@
 .commerce-storefront .pointer-events-none {
     pointer-events: none;
   }
+.commerce-storefront .visible {
+    visibility: visible;
+  }
 .commerce-storefront .sr-only {
     position: absolute;
     width: 1px;
@@ -159,12 +167,39 @@
 .commerce-storefront .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+.commerce-storefront .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+.commerce-storefront .top-0\.5 {
+    top: calc(var(--spacing) * 0.5);
+  }
 .commerce-storefront .top-1\/2 {
     top: calc(1/2 * 100%);
   }
+.commerce-storefront .top-3 {
+    top: calc(var(--spacing) * 3);
+  }
+.commerce-storefront .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
+.commerce-storefront .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
 .commerce-storefront .right-3 {
     right: calc(var(--spacing) * 3);
   }
+.commerce-storefront .left-1\/2 {
+    left: calc(1/2 * 100%);
+  }
+.commerce-storefront .left-3 {
+    left: calc(var(--spacing) * 3);
+  }
+.commerce-storefront .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
+.commerce-storefront .z-10 {
+    z-index: 10;
+  }
 .commerce-storefront .z-40 {
     z-index: 40;
   }
@@ -192,15 +227,24 @@
       max-width: 96rem;
     }
   }
+.commerce-storefront .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+.commerce-storefront .mx-auto {
+    margin-inline: auto;
+  }
 .commerce-storefront .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
-.commerce-storefront .my-8 {
-    margin-block: calc(var(--spacing) * 8);
+.commerce-storefront .-mt-3 {
+    margin-top: calc(var(--spacing) * -3);
   }
 .commerce-storefront .-mt-4 {
     margin-top: calc(var(--spacing) * -4);
   }
+.commerce-storefront .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
 .commerce-storefront .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -219,6 +263,9 @@
 .commerce-storefront .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+.commerce-storefront .mt-12 {
+    margin-top: calc(var(--spacing) * 12);
+  }
 .commerce-storefront .mt-auto {
     margin-top: auto;
   }
@@ -231,14 +278,14 @@
 .commerce-storefront .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
-.commerce-storefront .mb-8 {
-    margin-bottom: calc(var(--spacing) * 8);
+.commerce-storefront .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
   }
-.commerce-storefront .line-clamp-3 {
+.commerce-storefront .line-clamp-2 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
+    -webkit-line-clamp: 2;
   }
 .commerce-storefront .block {
     display: block;
@@ -252,24 +299,48 @@
 .commerce-storefront .hidden {
     display: none;
   }
+.commerce-storefront .inline {
+    display: inline;
+  }
+.commerce-storefront .inline-block {
+    display: inline-block;
+  }
 .commerce-storefront .inline-flex {
     display: inline-flex;
   }
 .commerce-storefront .aspect-square {
     aspect-ratio: 1 / 1;
   }
+.commerce-storefront .h-3\.5 {
+    height: calc(var(--spacing) * 3.5);
+  }
 .commerce-storefront .h-4 {
     height: calc(var(--spacing) * 4);
   }
+.commerce-storefront .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
 .commerce-storefront .h-6 {
     height: calc(var(--spacing) * 6);
   }
+.commerce-storefront .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
 .commerce-storefront .h-11 {
     height: calc(var(--spacing) * 11);
   }
+.commerce-storefront .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
+.commerce-storefront .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
 .commerce-storefront .h-20 {
     height: calc(var(--spacing) * 20);
   }
+.commerce-storefront .h-\[18px\] {
+    height: 18px;
+  }
 .commerce-storefront .h-full {
     height: 100%;
   }
@@ -279,29 +350,50 @@
 .commerce-storefront .min-h-44 {
     min-height: calc(var(--spacing) * 44);
   }
+.commerce-storefront .w-0\.5 {
+    width: calc(var(--spacing) * 0.5);
+  }
+.commerce-storefront .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
 .commerce-storefront .w-2\/3 {
     width: calc(2/3 * 100%);
   }
+.commerce-storefront .w-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+  }
 .commerce-storefront .w-4 {
     width: calc(var(--spacing) * 4);
   }
+.commerce-storefront .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+.commerce-storefront .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+.commerce-storefront .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
+.commerce-storefront .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+.commerce-storefront .w-14 {
+    width: calc(var(--spacing) * 14);
+  }
+.commerce-storefront .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
 .commerce-storefront .w-20 {
     width: calc(var(--spacing) * 20);
   }
-.commerce-storefront .w-28 {
-    width: calc(var(--spacing) * 28);
-  }
 .commerce-storefront .w-full {
     width: 100%;
   }
 .commerce-storefront .max-w-3xl {
     max-width: var(--container-3xl);
   }
-.commerce-storefront .max-w-full {
-    max-width: 100%;
-  }
-.commerce-storefront .max-w-lg {
-    max-width: var(--container-lg);
+.commerce-storefront .max-w-md {
+    max-width: var(--container-md);
   }
 .commerce-storefront .max-w-xl {
     max-width: var(--container-xl);
@@ -312,24 +404,43 @@
 .commerce-storefront .min-w-8 {
     min-width: calc(var(--spacing) * 8);
   }
+.commerce-storefront .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
 .commerce-storefront .min-w-11 {
     min-width: calc(var(--spacing) * 11);
   }
+.commerce-storefront .min-w-12 {
+    min-width: calc(var(--spacing) * 12);
+  }
+.commerce-storefront .min-w-\[18px\] {
+    min-width: 18px;
+  }
 .commerce-storefront .flex-1 {
     flex: 1;
   }
 .commerce-storefront .shrink-0 {
     flex-shrink: 0;
   }
+.commerce-storefront .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
 .commerce-storefront .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+.commerce-storefront .rotate-45 {
+    rotate: 45deg;
+  }
+.commerce-storefront .cursor-pointer {
+    cursor: pointer;
+  }
 .commerce-storefront .appearance-none {
     appearance: none;
   }
-.commerce-storefront .grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
+.commerce-storefront .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 .commerce-storefront .flex-col {
     flex-direction: column;
@@ -358,6 +469,12 @@
 .commerce-storefront .justify-end {
     justify-content: flex-end;
   }
+.commerce-storefront .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+.commerce-storefront .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
 .commerce-storefront .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -367,9 +484,6 @@
 .commerce-storefront .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
-.commerce-storefront .gap-6 {
-    gap: calc(var(--spacing) * 6);
-  }
 .commerce-storefront .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
@@ -380,13 +494,6 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-.commerce-storefront .space-y-4 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
 .commerce-storefront .space-y-6 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -394,12 +501,24 @@
       margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+.commerce-storefront .gap-x-2 {
+    column-gap: calc(var(--spacing) * 2);
+  }
 .commerce-storefront .gap-x-3 {
     column-gap: calc(var(--spacing) * 3);
   }
+.commerce-storefront .gap-x-4 {
+    column-gap: calc(var(--spacing) * 4);
+  }
 .commerce-storefront .gap-y-1 {
     row-gap: calc(var(--spacing) * 1);
   }
+.commerce-storefront .gap-y-2 {
+    row-gap: calc(var(--spacing) * 2);
+  }
+.commerce-storefront .gap-y-10 {
+    row-gap: calc(var(--spacing) * 10);
+  }
 .commerce-storefront .divide-y {
     :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
@@ -409,12 +528,12 @@
       border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
     }
   }
-.commerce-storefront .divide-neutral-200 {
+.commerce-storefront .divide-commerce-line {
     :where(& > :not(:last-child)) {
-      border-color: var(--commerce-text, #171717);
+      border-color: currentColor;
       @supports (color: color-mix(in lab, red, red)) {
         & {
-          border-color: color-mix(in srgb, var(--commerce-text, #171717) 15%, var(--commerce-surface, #fff));
+          border-color: color-mix(in srgb, currentColor 14%, transparent);
         }
       }
     }
@@ -437,14 +556,13 @@
 .commerce-storefront .rounded-lg {
     border-radius: var(--commerce-radius, 0.5rem);
   }
+.commerce-storefront .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
 .commerce-storefront .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-.commerce-storefront .border-2 {
-    border-style: var(--tw-border-style);
-    border-width: 2px;
-  }
 .commerce-storefront .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -453,19 +571,19 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-.commerce-storefront .border-neutral-200 {
-    border-color: var(--commerce-text, #171717);
+.commerce-storefront .border-commerce-edge {
+    border-color: currentColor;
     @supports (color: color-mix(in lab, red, red)) {
       & {
-        border-color: color-mix(in srgb, var(--commerce-text, #171717) 15%, var(--commerce-surface, #fff));
+        border-color: color-mix(in srgb, currentColor 28%, transparent);
       }
     }
   }
-.commerce-storefront .border-neutral-300 {
-    border-color: var(--commerce-text, #171717);
+.commerce-storefront .border-commerce-line {
+    border-color: currentColor;
     @supports (color: color-mix(in lab, red, red)) {
       & {
-        border-color: color-mix(in srgb, var(--commerce-text, #171717) 25%, var(--commerce-surface, #fff));
+        border-color: color-mix(in srgb, currentColor 14%, transparent);
       }
     }
   }
@@ -477,23 +595,34 @@
       }
     }
   }
-.commerce-storefront .border-neutral-900 {
-    border-color: var(--commerce-text, #171717);
-  }
-.commerce-storefront .border-transparent {
-    border-color: transparent;
+.commerce-storefront .bg-amber-50 {
+    background-color: var(--color-amber-50);
   }
 .commerce-storefront .bg-commerce-accent {
     background-color: var(--commerce-accent, #171717);
   }
-.commerce-storefront .bg-neutral-100 {
-    background-color: var(--commerce-text, #171717);
+.commerce-storefront .bg-commerce-sale {
+    background-color: var(--commerce-sale, #b42318);
+  }
+.commerce-storefront .bg-commerce-tint {
+    background-color: currentColor;
     @supports (color: color-mix(in lab, red, red)) {
       & {
-        background-color: color-mix(in srgb, var(--commerce-text, #171717) 5%, var(--commerce-surface, #fff));
+        background-color: color-mix(in srgb, currentColor 5%, transparent);
       }
     }
   }
+.commerce-storefront .bg-commerce-tint-strong {
+    background-color: currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        background-color: color-mix(in srgb, currentColor 9%, transparent);
+      }
+    }
+  }
+.commerce-storefront .bg-current {
+    background-color: currentcolor;
+  }
 .commerce-storefront .bg-neutral-950\/40 {
     background-color: color-mix(in srgb, oklch(14.5% 0 0) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -505,65 +634,86 @@
 .commerce-storefront .bg-red-50 {
     background-color: var(--color-red-50);
   }
+.commerce-storefront .bg-transparent {
+    background-color: transparent;
+  }
 .commerce-storefront .bg-white {
     background-color: var(--commerce-surface, #fff);
   }
 .commerce-storefront .object-cover {
     object-fit: cover;
   }
-.commerce-storefront .p-4 {
-    padding: calc(var(--spacing) * 4);
-  }
-.commerce-storefront .p-5 {
-    padding: calc(var(--spacing) * 5);
+.commerce-storefront .p-1 {
+    padding: calc(var(--spacing) * 1);
   }
 .commerce-storefront .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+.commerce-storefront .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
 .commerce-storefront .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
 .commerce-storefront .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
+.commerce-storefront .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
 .commerce-storefront .px-5 {
     padding-inline: calc(var(--spacing) * 5);
   }
+.commerce-storefront .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
 .commerce-storefront .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
+.commerce-storefront .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
 .commerce-storefront .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
-.commerce-storefront .py-5 {
-    padding-block: calc(var(--spacing) * 5);
+.commerce-storefront .py-3 {
+    padding-block: calc(var(--spacing) * 3);
   }
-.commerce-storefront .py-6 {
-    padding-block: calc(var(--spacing) * 6);
+.commerce-storefront .py-4 {
+    padding-block: calc(var(--spacing) * 4);
   }
-.commerce-storefront .py-8 {
-    padding-block: calc(var(--spacing) * 8);
+.commerce-storefront .py-5 {
+    padding-block: calc(var(--spacing) * 5);
   }
 .commerce-storefront .py-16 {
     padding-block: calc(var(--spacing) * 16);
   }
+.commerce-storefront .py-20 {
+    padding-block: calc(var(--spacing) * 20);
+  }
+.commerce-storefront .pt-2\.5 {
+    padding-top: calc(var(--spacing) * 2.5);
+  }
+.commerce-storefront .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
 .commerce-storefront .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
-.commerce-storefront .pt-5 {
-    padding-top: calc(var(--spacing) * 5);
-  }
 .commerce-storefront .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
-.commerce-storefront .pt-8 {
-    padding-top: calc(var(--spacing) * 8);
+.commerce-storefront .pr-3 {
+    padding-right: calc(var(--spacing) * 3);
   }
 .commerce-storefront .pr-10 {
     padding-right: calc(var(--spacing) * 10);
   }
-.commerce-storefront .pb-10 {
-    padding-bottom: calc(var(--spacing) * 10);
+.commerce-storefront .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+.commerce-storefront .pl-6 {
+    padding-left: calc(var(--spacing) * 6);
   }
 .commerce-storefront .text-center {
     text-align: center;
@@ -572,9 +722,9 @@
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
-.commerce-storefront .text-4xl {
-    font-size: var(--text-4xl);
-    line-height: var(--tw-leading, var(--text-4xl--line-height));
+.commerce-storefront .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
 .commerce-storefront .text-base {
     font-size: var(--text-base);
@@ -596,6 +746,13 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+.commerce-storefront .text-\[11px\] {
+    font-size: 11px;
+  }
+.commerce-storefront .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
 .commerce-storefront .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
@@ -620,18 +777,36 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+.commerce-storefront .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+.commerce-storefront .text-balance {
+    text-wrap: balance;
+  }
 .commerce-storefront .break-words {
     overflow-wrap: break-word;
   }
 .commerce-storefront .whitespace-pre-line {
     white-space: pre-line;
   }
-.commerce-storefront .text-amber-800 {
-    color: var(--color-amber-800);
+.commerce-storefront .text-amber-900 {
+    color: var(--color-amber-900);
+  }
+.commerce-storefront .text-commerce-muted {
+    color: currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        color: color-mix(in srgb, currentColor 68%, transparent);
+      }
+    }
   }
 .commerce-storefront .text-commerce-on-accent {
     color: var(--commerce-on-accent, #fff);
   }
+.commerce-storefront .text-commerce-on-sale {
+    color: var(--commerce-on-sale, #fff);
+  }
 .commerce-storefront .text-inherit {
     color: inherit;
   }
@@ -646,25 +821,143 @@
 .commerce-storefront .text-neutral-900 {
     color: var(--commerce-text, #171717);
   }
-.commerce-storefront .text-red-700 {
-    color: var(--color-red-700);
-  }
 .commerce-storefront .text-red-800 {
     color: var(--color-red-800);
   }
+.commerce-storefront .tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+.commerce-storefront .line-through {
+    text-decoration-line: line-through;
+  }
 .commerce-storefront .underline {
     text-decoration-line: underline;
   }
+.commerce-storefront .decoration-1 {
+    text-decoration-thickness: 1px;
+  }
 .commerce-storefront .underline-offset-4 {
     text-underline-offset: 4px;
   }
-.commerce-storefront .shadow-xl {
-    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+.commerce-storefront .opacity-0 {
+    opacity: 0%;
+  }
+.commerce-storefront .opacity-50 {
+    opacity: 50%;
+  }
+.commerce-storefront .opacity-60 {
+    opacity: 60%;
+  }
+.commerce-storefront .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-.commerce-storefront .first\:pt-0 {
-    &:first-child {
-      padding-top: calc(var(--spacing) * 0);
+.commerce-storefront .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+.commerce-storefront .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+.commerce-storefront .outline-2 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+  }
+.commerce-storefront .outline-offset-2 {
+    outline-offset: 2px;
+  }
+.commerce-storefront .outline-current {
+    outline-color: currentcolor;
+  }
+.commerce-storefront .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+.commerce-storefront .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+.commerce-storefront .\[-moz-appearance\:textfield\] {
+    -moz-appearance: textfield;
+  }
+.commerce-storefront .group-hover\:border-current {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        border-color: currentcolor;
+      }
+    }
+  }
+.commerce-storefront .peer-checked\:border-commerce-accent {
+    &:is(:where(.peer):checked ~ *) {
+      border-color: var(--commerce-accent, #171717);
+    }
+  }
+.commerce-storefront .peer-checked\:bg-commerce-accent {
+    &:is(:where(.peer):checked ~ *) {
+      background-color: var(--commerce-accent, #171717);
+    }
+  }
+.commerce-storefront .peer-checked\:text-commerce-on-accent {
+    &:is(:where(.peer):checked ~ *) {
+      color: var(--commerce-on-accent, #fff);
+    }
+  }
+.commerce-storefront .peer-checked\:outline {
+    &:is(:where(.peer):checked ~ *) {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+.commerce-storefront .peer-checked\:outline-2 {
+    &:is(:where(.peer):checked ~ *) {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+.commerce-storefront .peer-checked\:outline-offset-2 {
+    &:is(:where(.peer):checked ~ *) {
+      outline-offset: 2px;
+    }
+  }
+.commerce-storefront .peer-checked\:outline-commerce-accent {
+    &:is(:where(.peer):checked ~ *) {
+      outline-color: var(--commerce-accent, #171717);
+    }
+  }
+.commerce-storefront .peer-focus-visible\:outline {
+    &:is(:where(.peer):focus-visible ~ *) {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+.commerce-storefront .peer-focus-visible\:outline-2 {
+    &:is(:where(.peer):focus-visible ~ *) {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+.commerce-storefront .peer-focus-visible\:outline-offset-2 {
+    &:is(:where(.peer):focus-visible ~ *) {
+      outline-offset: 2px;
+    }
+  }
+.commerce-storefront .peer-focus-visible\:outline-offset-4 {
+    &:is(:where(.peer):focus-visible ~ *) {
+      outline-offset: 4px;
+    }
+  }
+.commerce-storefront .peer-focus-visible\:outline-commerce-accent {
+    &:is(:where(.peer):focus-visible ~ *) {
+      outline-color: var(--commerce-accent, #171717);
+    }
+  }
+.commerce-storefront .peer-focus-visible\:outline-current {
+    &:is(:where(.peer):focus-visible ~ *) {
+      outline-color: currentcolor;
     }
   }
 .commerce-storefront .hover\:bg-commerce-accent-hover {
@@ -674,6 +967,25 @@
       }
     }
   }
+.commerce-storefront .hover\:bg-commerce-tint {
+    &:hover {
+      @media (hover: hover) {
+        background-color: currentColor;
+        @supports (color: color-mix(in lab, red, red)) {
+          & {
+            background-color: color-mix(in srgb, currentColor 5%, transparent);
+          }
+        }
+      }
+    }
+  }
+.commerce-storefront .hover\:text-inherit {
+    &:hover {
+      @media (hover: hover) {
+        color: inherit;
+      }
+    }
+  }
 .commerce-storefront .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -681,6 +993,13 @@
       }
     }
   }
+.commerce-storefront .hover\:opacity-100 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 100%;
+      }
+    }
+  }
 .commerce-storefront .focus-visible\:outline {
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -693,9 +1012,9 @@
       outline-width: 2px;
     }
   }
-.commerce-storefront .focus-visible\:-outline-offset-4 {
+.commerce-storefront .focus-visible\:-outline-offset-2 {
     &:focus-visible {
-      outline-offset: calc(4px * -1);
+      outline-offset: calc(2px * -1);
     }
   }
 .commerce-storefront .focus-visible\:outline-offset-2 {
@@ -703,70 +1022,108 @@
       outline-offset: 2px;
     }
   }
+.commerce-storefront .focus-visible\:outline-commerce-accent {
+    &:focus-visible {
+      outline-color: var(--commerce-accent, #171717);
+    }
+  }
+.commerce-storefront .focus-visible\:outline-current {
+    &:focus-visible {
+      outline-color: currentcolor;
+    }
+  }
 .commerce-storefront .focus-visible\:outline-neutral-900 {
     &:focus-visible {
       outline-color: var(--commerce-text, #171717);
     }
   }
+.commerce-storefront .focus-visible\:outline-red-800 {
+    &:focus-visible {
+      outline-color: var(--color-red-800);
+    }
+  }
 .commerce-storefront .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;
     }
   }
-.commerce-storefront .disabled\:bg-neutral-100 {
+.commerce-storefront .disabled\:border-commerce-line {
     &:disabled {
-      background-color: var(--commerce-text, #171717);
+      border-color: currentColor;
       @supports (color: color-mix(in lab, red, red)) {
         & {
-          background-color: color-mix(in srgb, var(--commerce-text, #171717) 5%, var(--commerce-surface, #fff));
+          border-color: color-mix(in srgb, currentColor 14%, transparent);
         }
       }
     }
   }
-.commerce-storefront .disabled\:bg-neutral-200 {
+.commerce-storefront .disabled\:bg-commerce-tint-strong {
     &:disabled {
-      background-color: var(--commerce-text, #171717);
+      background-color: currentColor;
       @supports (color: color-mix(in lab, red, red)) {
         & {
-          background-color: color-mix(in srgb, var(--commerce-text, #171717) 15%, var(--commerce-surface, #fff));
+          background-color: color-mix(in srgb, currentColor 9%, transparent);
         }
       }
     }
   }
-.commerce-storefront .disabled\:text-neutral-600 {
+.commerce-storefront .disabled\:text-commerce-muted {
     &:disabled {
-      color: var(--commerce-text, #171717);
+      color: currentColor;
       @supports (color: color-mix(in lab, red, red)) {
         & {
-          color: color-mix(in srgb, var(--commerce-text, #171717) 75%, var(--commerce-surface, #fff));
+          color: color-mix(in srgb, currentColor 68%, transparent);
         }
       }
     }
   }
-.commerce-storefront .disabled\:text-neutral-700 {
+.commerce-storefront .disabled\:hover\:bg-commerce-tint-strong {
     &:disabled {
-      color: var(--commerce-text, #171717);
-      @supports (color: color-mix(in lab, red, red)) {
-        & {
-          color: color-mix(in srgb, var(--commerce-text, #171717) 85%, var(--commerce-surface, #fff));
+      &:hover {
+        @media (hover: hover) {
+          background-color: currentColor;
+          @supports (color: color-mix(in lab, red, red)) {
+            & {
+              background-color: color-mix(in srgb, currentColor 9%, transparent);
+            }
+          }
         }
       }
     }
   }
-.commerce-storefront .disabled\:hover\:bg-neutral-200 {
+.commerce-storefront .disabled\:hover\:bg-transparent {
     &:disabled {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--commerce-text, #171717);
-          @supports (color: color-mix(in lab, red, red)) {
-            & {
-              background-color: color-mix(in srgb, var(--commerce-text, #171717) 15%, var(--commerce-surface, #fff));
-            }
-          }
+          background-color: transparent;
         }
       }
     }
   }
+.commerce-storefront .disabled\:hover\:no-underline {
+    &:disabled {
+      &:hover {
+        @media (hover: hover) {
+          text-decoration-line: none;
+        }
+      }
+    }
+  }
+.commerce-storefront .motion-safe\:animate-commerce-drawer-in {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: commerce-drawer-in 250ms cubic-bezier(0.32, 0.72, 0, 1);
+    }
+  }
+.commerce-storefront .motion-safe\:animate-commerce-fade-in {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: commerce-fade-in 200ms ease-out;
+    }
+  }
+.commerce-storefront .motion-safe\:animate-commerce-pop {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: commerce-pop 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+  }
 .commerce-storefront .motion-safe\:animate-pulse {
     @media (prefers-reduced-motion: no-preference) {
       animation: var(--animate-pulse);
@@ -779,37 +1136,35 @@
       transition-duration: var(--tw-duration, var(--default-transition-duration));
     }
   }
-.commerce-storefront .motion-safe\:duration-200 {
+.commerce-storefront .motion-safe\:duration-500 {
+    @media (prefers-reduced-motion: no-preference) {
+      --tw-duration: 500ms;
+      transition-duration: 500ms;
+    }
+  }
+.commerce-storefront .motion-safe\:ease-out {
     @media (prefers-reduced-motion: no-preference) {
-      --tw-duration: 200ms;
-      transition-duration: 200ms;
+      --tw-ease: var(--ease-out);
+      transition-timing-function: var(--ease-out);
     }
   }
-.commerce-storefront .motion-safe\:group-hover\:scale-105 {
+.commerce-storefront .motion-safe\:group-hover\:scale-\[1\.03\] {
     @media (prefers-reduced-motion: no-preference) {
       &:is(:where(.group):hover *) {
         @media (hover: hover) {
-          --tw-scale-x: 105%;
-          --tw-scale-y: 105%;
-          --tw-scale-z: 105%;
-          scale: var(--tw-scale-x) var(--tw-scale-y);
+          scale: 1.03;
         }
       }
     }
   }
-.commerce-storefront .sm\:mb-10 {
-    @media (width >= 40rem) {
-      margin-bottom: calc(var(--spacing) * 10);
-    }
-  }
-.commerce-storefront .sm\:grid-cols-2 {
+.commerce-storefront .sm\:mb-6 {
     @media (width >= 40rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+      margin-bottom: calc(var(--spacing) * 6);
     }
   }
-.commerce-storefront .sm\:py-8 {
+.commerce-storefront .sm\:gap-x-6 {
     @media (width >= 40rem) {
-      padding-block: calc(var(--spacing) * 8);
+      column-gap: calc(var(--spacing) * 6);
     }
   }
 .commerce-storefront .sm\:pt-8 {
@@ -817,46 +1172,30 @@
       padding-top: calc(var(--spacing) * 8);
     }
   }
-.commerce-storefront .sm\:pb-14 {
+.commerce-storefront .sm\:pb-8 {
     @media (width >= 40rem) {
-      padding-bottom: calc(var(--spacing) * 14);
+      padding-bottom: calc(var(--spacing) * 8);
     }
   }
-.commerce-storefront .sm\:text-5xl {
+.commerce-storefront .sm\:text-4xl {
     @media (width >= 40rem) {
-      font-size: var(--text-5xl);
-      line-height: var(--tw-leading, var(--text-5xl--line-height));
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
     }
   }
-.commerce-storefront .sm\:text-lg {
-    @media (width >= 40rem) {
-      font-size: var(--text-lg);
-      line-height: var(--tw-leading, var(--text-lg--line-height));
-    }
-  }
-.commerce-storefront .lg\:col-span-5 {
-    @media (width >= 64rem) {
-      grid-column: span 5 / span 5;
-    }
-  }
-.commerce-storefront .lg\:col-span-7 {
-    @media (width >= 64rem) {
-      grid-column: span 7 / span 7;
-    }
-  }
-.commerce-storefront .lg\:grid-cols-3 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+.commerce-storefront .md\:grid-cols-\[minmax\(0\,1\.15fr\)_minmax\(0\,1fr\)\] {
+    @media (width >= 48rem) {
+      grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
     }
   }
-.commerce-storefront .lg\:grid-cols-12 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
+.commerce-storefront .md\:grid-cols-\[repeat\(auto-fill\,minmax\(240px\,1fr\)\)\] {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
     }
   }
-.commerce-storefront .lg\:gap-8 {
-    @media (width >= 64rem) {
-      gap: calc(var(--spacing) * 8);
+.commerce-storefront .md\:pt-2 {
+    @media (width >= 48rem) {
+      padding-top: calc(var(--spacing) * 2);
     }
   }
 .commerce-storefront .lg\:gap-12 {
@@ -864,20 +1203,19 @@
       gap: calc(var(--spacing) * 12);
     }
   }
-.commerce-storefront .lg\:py-4 {
+.commerce-storefront .lg\:gap-y-12 {
     @media (width >= 64rem) {
-      padding-block: calc(var(--spacing) * 4);
+      row-gap: calc(var(--spacing) * 12);
     }
   }
-.commerce-storefront .lg\:py-10 {
-    @media (width >= 64rem) {
-      padding-block: calc(var(--spacing) * 10);
+.commerce-storefront .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none {
+    &::-webkit-inner-spin-button {
+      appearance: none;
     }
   }
-.commerce-storefront .lg\:text-6xl {
-    @media (width >= 64rem) {
-      font-size: var(--text-6xl);
-      line-height: var(--tw-leading, var(--text-6xl--line-height));
+.commerce-storefront .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none {
+    &::-webkit-outer-spin-button {
+      appearance: none;
     }
   }
 @property --tw-translate-x {
@@ -918,6 +1256,30 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -992,23 +1354,27 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-y {
+@property --tw-ease {
   syntax: "*";
   inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
 }
 @keyframes pulse {
   50% {
     opacity: 0.5;
   }
 }
+@keyframes commerce-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes commerce-pop {
+  40% {
+    transform: scale(1.3);
+  }
+}
+@keyframes commerce-drawer-in {
+  from {
+    transform: translateX(100%);
+  }
+}