@sonic-equipment/ui 0.0.14 → 0.0.16

package/dist/styles.css

@@ -1,11 +1,14 @@
 :root {
+  /* font families */
   --font-family-sonic: 'Pancetta', sans-serif;
 
+  /* font sizes */
   --font-size-11: 0.6875rem;
   --font-size-12: 0.75rem;
   --font-size-14: 0.875rem;
   --font-size-16: 1rem;
   --font-size-18: 1.125rem;
+  --font-size-20: 1.25rem;
   --font-size-24: 1.5rem;
   --font-size-32: 2rem;
   --font-size-36: 2.25rem;
@@ -15,8 +18,10 @@
   --font-size-64: 4rem;
   --font-size-96: 6rem;
 
+  /* base font size */
   --font-size-base: var(--font-size-16);
 
+  /* font weights */
   --font-weight-thin: 100;
   --font-weight-extralight: 200;
   --font-weight-light: 300;
@@ -27,8 +32,10 @@
   --font-weight-extrabold: 800;
   --font-weight-black: 900;
 
+  /* base font weight */
   --font-weight-base: var(--font-weight-normal);
 
+  /* line heights */
   --line-height-22: 1.375rem;
   --line-height-24: 1.5rem;
   --line-height-28: 1.75rem;
@@ -38,26 +45,34 @@
   --line-height-56: 3.5rem;
   --line-height-84: 5.25rem;
 
+  /* base line height */
   --line-height-base: var(--line-height-24);
 
+  /* headings xxl */
   --text-heading-xxl-size: var(--font-size-96);
   --text-heading-xxl-line-height: var(--line-height-84);
 
+  /* headings xl */
   --text-heading-xl-size: var(--font-size-64);
   --text-heading-xl-line-height: var(--line-height-56);
 
+  /* headings l */
   --text-heading-l-size: var(--font-size-52);
   --text-heading-l-line-height: var(--line-height-44);
 
+  /* headings m */
   --text-heading-m-size: var(--font-size-48);
   --text-heading-m-line-height: var(--line-height-42);
 
+  /* headings s */
   --text-heading-s-size: var(--font-size-44);
   --text-heading-s-line-height: var(--line-height-38);
 
+  /* headings xs */
   --text-heading-xs-size: var(--font-size-32);
   --text-heading-xs-line-height: var(--line-height-28);
 
+  /* headings xxs */
   --text-heading-xxs-size: var(--font-size-24);
   --text-heading-xxs-line-height: var(--line-height-22);
 }
@@ -78,22 +93,21 @@
   --space-2: 2px;
   --space-4: 4px;
   --space-8: 8px;
+  --space-12: 12px;
   --space-16: 16px;
   --space-20: 20px;
   --space-24: 24px;
   --space-32: 32px;
   --space-36: 36px;
+  --space-40: 40px;
   --space-44: 44px;
   --space-48: 48px;
   --space-52: 52px;
   --space-56: 56px;
   --space-64: 64px;
   --space-72: 72px;
-  --space-96: 96px;
-
-  --space-20: 20px;
-  --space-40: 40px;
   --space-80: 80px;
+  --space-96: 96px;
   --space-100: 100px;
 }
 :root {
@@ -105,8 +119,11 @@
 
   --color-transparent: transparent;
 
-  --color-white: #ffffff;
+  /* Base */
+  --color-black: #000;
+  --color-white: #fff;
 
+  /* Reds */
   --color-red-50: #fff0f1;
   --color-red-100: #ffdee0;
   --color-red-200: #ffc3c7;
@@ -119,12 +136,12 @@
   --color-red-900: #8d0f16;
   --color-red-950: #4d0206;
 
+  /* Neutrals */
+  --color-gray-50: #fbfbfb;
   --color-gray-100: #ededed;
   --color-gray-500: #bcbcbc;
   --color-gray-900: #6f6f6f;
 
-  --color-black: #000000;
-
   /*********************************************************
   *
   *  Alias color tokens
@@ -134,24 +151,30 @@
   --color-brand-white: var(--color-white);
   --color-brand-black: var(--color-black);
 
+  /* Reds */
   --color-brand-red: var(--color-red-700);
   --color-brand-dark-red: var(--color-red-800);
 
+  /* Neutrals */
   --color-brand-dark-steelblue: #44586b;
   --color-brand-light-steelblue: #6ca1b6;
   --color-brand-dark-golden-rod: #d2a558;
 
+  /* Status */
   --color-status-available: #007000;
 
+  /* Semantic */
   --color-semantic-okay: #30d158;
   --color-semantic-notify: #ff9f0a;
   --color-semantic-stop: #e30613;
   --color-semantic-information: #0a84ff;
 
+  /* Brand neutrals */
   --color-brand-light-gray: var(--color-gray-100);
   --color-brand-medium-gray: var(--color-gray-500);
   --color-brand-dark-gray: var(--color-gray-900);
 
+  /* State */
   --color-focus-ring: var(--color-brand-red);
 }
 :root {
@@ -182,35 +205,37 @@
   --border-width-2: 2px;
   --border-width-3: 4px;
 }
+:root {
+  --shadow-focus-outline: 0 0 1px 2px rgb(227 6 19 / 40%);
+  --shadow-focus-outline-padded: 0 0 1px 4px rgb(227 6 19 / 40%);
+  --box-shadow: 0 0 96px 0 rgb(0 0 0 / 30%);
+}
 
 .button-module-V4meK {
   all: unset;
-
-  align-items: center;
   display: inline-flex;
+  width: uppercase;
+  box-sizing: border-box;
   flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
   font-size: var(--font-size-base);
   font-style: italic;
   font-weight: var(--font-weight-bold);
-  justify-content: center;
+  gap: 5px;
   line-height: var(--line-height-base);
   text-transform: uppercase;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   vertical-align: text-bottom;
-  cursor: pointer;
 }
 
   .button-module-V4meK:where([data-disabled]) {
     cursor: default;
   }
 
-  .button-module-V4meK {
-
-  gap: 3px;
-}
-
 /*********************************************************
  *
  *  Sizes
@@ -218,11 +243,18 @@
 *********************************************************/
 
 .button-module-GVTEW {
+  min-width: 52px;
   min-height: 40px;
+  box-sizing: border-box;
+  padding: 0 var(--space-20);
   border-radius: var(--border-radius-20);
-  padding-inline: var(--space-20);
 }
 
+.button-module-GVTEW.button-module-GKHQc {
+    min-width: var(--space-56);
+    padding: 0 var(--space-16);
+  }
+
 .button-module-nyNY8 {
   min-height: 44px;
   border-radius: var(--border-radius-22);
@@ -261,9 +293,9 @@
   }
 
 .button-module-tmyk8:where([data-disabled]) {
+    border-color: var(--color-brand-light-gray);
     background-color: var(--color-red-100);
     color: var(--color-red-50);
-    border-color: var(--color-brand-light-gray);
   }
 
 .button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY) {
@@ -292,18 +324,150 @@
   }
 
 .button-module--1bCH:where([data-disabled]) {
+    border-color: var(--color-brand-medium-gray);
     background-color: var(--color-white);
     color: var(--color-brand-medium-gray);
-    border-color: var(--color-brand-medium-gray);
   }
 
 .button-module--1bCH:where([data-disabled]) .button-module-ydQAo {
       color: var(--color-red-300);
     }
 
-.icon-button-module-HJm0i {
+.field-error-module-FXnIg {
+  color: var(--color-brand-red);
+}
+
+/*************************************************************************
+ * Shared Text Field Styles
+ *************************************************************************/
+.input-module-2woJR {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  border: none;
+  border-radius: var(--border-radius-8);
+  background-color: var(--color-brand-light-gray);
+}
+.input-module-2woJR .input-module-pNKEt,
+  .input-module-2woJR input {
+    all: unset;
+    min-width: 180px;
+    box-sizing: border-box;
+    font: inherit;
+  }
+.input-module-2woJR .input-module-pNKEt::-moz-placeholder, .input-module-2woJR input::-moz-placeholder {
+      font-style: italic;
+    }
+.input-module-2woJR .input-module-pNKEt::placeholder, .input-module-2woJR input::placeholder {
+      font-style: italic;
+    }
+.input-module-2woJR .input-module-pNKEt {
+    display: none;
+  }
+.input-module-2woJR:where(.input-module-Dx2qC) {
+    height: var(--space-44);
+  }
+.input-module-2woJR:where(.input-module-Dx2qC) .input-module-pNKEt,
+    .input-module-2woJR:where(.input-module-Dx2qC) input {
+      height: var(--space-44);
+      padding: 0 var(--space-16);
+    }
+.input-module-2woJR:where(.input-module-sH6e7) {
+    height: var(--space-40);
+  }
+.input-module-2woJR:where(.input-module-sH6e7) .input-module-pNKEt,
+    .input-module-2woJR:where(.input-module-sH6e7) input {
+      height: var(--space-40);
+      padding: 0 var(--space-8);
+    }
+.input-module-2woJR:has([data-disabled]) {
+    background-color: var(--color-gray-50);
+    color: var(--color-gray-500);
+  }
+.input-module-2woJR.input-module-hEEuy,
+  .input-module-2woJR:has([data-focused]) {
+    box-shadow: var(--shadow-focus-outline);
+    outline: 0;
+  }
+.input-module-2woJR:has([data-invalid])::after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    height: 2px;
+    background-color: var(--color-brand-red);
+    content: '';
+  }
+.input-module-2woJR .input-module-6HwY4 {
+  display: inline-grid;
+}
+.input-module-2woJR .input-module-6HwY4 .input-module-pNKEt,
+  .input-module-2woJR .input-module-6HwY4 input {
+    min-width: auto;
+    grid-area: 1 / 1;
+  }
+.input-module-2woJR .input-module-6HwY4 input {
+    text-align: center;
+  }
+.input-module-2woJR .input-module-6HwY4 .input-module-pNKEt {
+    display: block;
+    visibility: hidden;
+    white-space: nowrap;
+  }
+
+.label-module-LGfJt {
+  all: unset;
+  font-weight: var(--font-weight-bold);
+}
+
+  .label-module-LGfJt :where(.label-module-oTWaS) {
+    color: var(--color-brand-red);
+    margin-inline-start: var(--space-4);
+  }
+
+.number-field-module-gmnog {
   all: unset;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-4);
+}
+
+  .number-field-module-gmnog .number-field-module-8Lvgh {
+    display: flex;
+    width: 100%;
+    align-items: stretch;
+    justify-content: space-between;
+  }
+
+  .number-field-module-gmnog .number-field-module-8Lvgh button {
+      all: unset;
+      width: var(--space-32);
+      cursor: pointer;
+      font-size: var(--font-size-24);
+      text-align: center;
+    }
+
+  .number-field-module-gmnog span:empty {
+    display: none;
+  }
+
+.add-to-cart-button-module-AWFvQ {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+}
 
+.add-to-cart-button-module-SS7WM {
+  display: inline-block;
+  width: 28px;
+}
+
+.icon-button-module-4PDK- {
+  all: unset;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -348,85 +512,251 @@
     color: var(--color-brand-dark-red);
   }
 
-.favorite-button-module-tXSS3:where(.favorite-button-module-6FS3Q) {
+.favorite-button-module-tXSS3:where(.favorite-button-module-l557q) {
     color: var(--color-brand-red);
   }
 
+.tag-module-B7r15 {
+  --tag-bg-color: var(--color-brand-red);
+  --tag-fg-color: var(--color-brand-white);
+
+  display: inline-flex;
+  height: 16px;
+  flex: 1 1;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+  .tag-module-B7r15 .tag-module-4cfCf {
+    display: block;
+    padding: 2px 0 0 4px;
+    border: 1px solid var(--tag-bg-color);
+    background-color: var(--tag-bg-color);
+    color: var(--tag-fg-color);
+    font-size: var(--font-size-11);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-size-11);
+    text-transform: uppercase;
+  }
+
+  .tag-module-B7r15 .tag-module-c7CRb {
+    min-width: 8px;
+    height: 16px;
+    flex: 0 0;
+    color: var(--tag-bg-color);
+    vertical-align: top;
+  }
+
 .product-price-module-oIU1K {
   --current-price-color: var(--color-brand-black);
+  --current-price-font-style: normal;
+  --font-size-wholes: var(--price-font-size-wholes, var(--font-size-36));
+  --font-size-decimals: var(--price-font-size-decimals, var(--font-size-24));
 
   display: flex;
   flex-direction: column;
 }
 
   .product-price-module-oIU1K .product-price-module-til0s {
-    font-weight: var(--font-weight-bold);
+    padding-left: var(--space-4);
     color: var(--color-brand-dark-gray);
-    text-decoration: line-through;
     font-size: var(--font-size-18);
-    padding-left: var(--space-4);
+    font-weight: var(--font-weight-bold);
+    text-decoration: line-through;
   }
 
   .product-price-module-oIU1K .product-price-module-FfVhl {
     display: flex;
-    gap: var(--space-4);
+    flex-wrap: wrap;
     align-items: baseline;
     margin-top: calc(var(--space-4) * -1);
+    gap: 0 var(--space-4);
   }
 
   .product-price-module-oIU1K .product-price-module-pvy2w {
     position: relative;
     display: flex;
-    line-height: 1;
     color: var(--current-price-color);
-    font-weight: var(--font-weight-black);
     font-size: var(--font-size-36);
-    font-style: italic;
+    font-style: var(--current-price-font-style);
+    font-weight: var(--font-weight-black);
+    line-height: 1;
   }
 
   .product-price-module-oIU1K .product-price-module-pvy2w > * {
       line-height: 1;
     }
 
-  .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-GCw07 {
-      font-size: 36px;
-    }
-
-  .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-N56iV {
-      margin-bottom: 0;
+  .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-GCw07,
+    .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-N56iV {
+      font-size: var(--font-size-wholes);
     }
 
   .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-eWOOF {
       position: relative;
-      font-size: var(--font-size-24);
-      margin-left: -0.375rem;
       margin-top: 2px;
-      vertical-align: top;
+      margin-left: -0.375rem;
+      font-size: var(--font-size-decimals);
     }
 
   .product-price-module-oIU1K .product-price-module-96DoG {
-    font-size: var(--font-size-12);
     color: var(--color-brand-dark-gray);
+    font-size: var(--font-size-12);
     font-weight: var(--font-weight-normal);
   }
 
   .product-price-module-oIU1K:has(.product-price-module-til0s) {
     --current-price-color: var(--color-brand-red);
+    --current-price-font-style: italic;
   }
 
 .product-sku-module-ITb8x {
-    all: unset;
-    font-size: var(--font-size-14);
-    color: var(--color-brand-dark-gray);;
+  all: unset;
+  color: var(--color-brand-dark-gray);
+  font-size: var(--font-size-14);
 }
 
-.checkbox-module-y3eBg {
-  all: unset;
+.image-module-lg7Kj {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+  .image-module-lg7Kj:where(.image-module-KFEgG) {
+    margin: auto;
+    -o-object-fit: contain;
+       object-fit: contain;
+  }
+
+  .image-module-lg7Kj:where(.image-module-tVKFe) {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: cover;
+       object-fit: cover;
+  }
+
+.product-card-module-pLaiB {
+  --title-font-size: var(--font-size-16);
+  --price-font-size-wholes: var(--font-size-32);
+  --price-font-size-decimals: var(--font-size-20);
+  --image-width: 122px;
+  --padding-inline: var(--space-12);
+  --padding-bottom: var(--space-12);
+
+  position: relative;
+  display: block;
+  padding-top: var(--space-12);
+  background-color: var(--color-white);
+  color: var(--color-black);
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    scale ease 0.2s,
+    box-shadow ease 0.2s;
+}
 
+  .product-card-module-pLaiB .product-card-module-tvEdz {
+    position: absolute;
+    top: var(--space-8);
+    right: var(--space-8);
+  }
+
+  .product-card-module-pLaiB .product-card-module-e0kMu {
+    padding-bottom: var(--padding-bottom);
+    padding-inline: var(--padding-inline);
+  }
+
+  .product-card-module-pLaiB .product-card-module-Q0VvF {
+    margin-bottom: 53px;
+  }
+
+  .product-card-module-pLaiB .product-card-module-Q0VvF .product-card-module-HkWBE {
+      margin-bottom: 18px;
+    }
+
+  .product-card-module-pLaiB .product-card-module-Q0VvF .product-card-module-CStNi {
+      display: -webkit-box;
+      overflow: hidden;
+      margin-top: 0;
+      margin-bottom: var(--space-8);
+      -webkit-box-orient: vertical;
+      font-size: var(--title-font-size);
+      -webkit-line-clamp: 4;
+      line-height: 1;
+      text-wrap: balance;
+    }
+
+  .product-card-module-pLaiB .product-card-module-kD2tU {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .product-card-module-pLaiB .product-card-module-p-zoi {
+    width: var(--image-width);
+    aspect-ratio: 1 / 1;
+    margin-inline: auto;
+  }
+
+  .product-card-module-pLaiB .product-card-module-p-zoi img {
+      display: block;
+      max-width: 100%;
+    }
+
+  .product-card-module-pLaiB .product-card-module-irW0D {
+    width: 100%;
+  }
+
+  .product-card-module-pLaiB .product-card-module-SnCvX {
+    display: flex;
+    width: 125px;
+    justify-content: flex-end;
+    margin-top: var(--space-4);
+    margin-left: auto;
+  }
+
+@media (hover: hover) {
+    .product-card-module-pLaiB:hover {
+      box-shadow: var(--box-shadow);
+      scale: 1.04;
+    }
+}
+
+@container (min-width: 282px) {
+  .product-card-module-pLaiB {
+    --image-width: 204px;
+    --padding-bottom: var(--space-24);
+  }
+
+    .product-card-module-pLaiB .product-card-module-SnCvX {
+      margin-top: 0;
+      margin-left: auto;
+    }
+
+    .product-card-module-pLaiB .product-card-module-kD2tU {
+      flex-wrap: nowrap;
+    }
+
+    .product-card-module-pLaiB .product-card-module-irW0D {
+      width: initial;
+    }
+}
+
+@container (min-width: 360px) {
+  .product-card-module-pLaiB {
+    --image-width: 288px;
+    --title-font-size: var(--font-size-20);
+    --price-font-size-wholes: var(--font-size-36);
+    --price-font-size-decimals: var(--font-size-24);
+    --padding-inline: var(--space-16);
+  }
+}
+
+.checkbox-module-YNVdd {
   --selected-color: var(--color-brand-red);
   --selected-color-pressed: var(--color-brand-dark-red);
   --disabled-color: color-mix(in srgb, var(--selected-color) 20%, transparent);
-
   --checkmark-color: var(--color-white);
   --disabled-checkmark-color: color-mix(
     in srgb,
@@ -434,71 +764,220 @@
     transparent
   );
 
-  box-sizing: border-box;
-
+  all: unset;
   display: flex;
+  box-sizing: border-box;
   align-items: center;
-  gap: 4px;
   color: var(--color-brand-black);
   forced-color-adjust: none;
+  gap: 4px;
 }
 
-  .checkbox-module-y3eBg .checkbox-module-TqLux {
-    box-sizing: border-box;
+  .checkbox-module-YNVdd .checkbox-module-UKoyf {
+    display: flex;
     width: 16px;
     height: 16px;
-    border: 2px solid var(--color-brand-medium-gray);
-    border-radius: var(--border-radius-2);
-    transition: all 200ms;
-    display: flex;
+    box-sizing: border-box;
     align-items: center;
     justify-content: center;
+    border: 2px solid var(--color-brand-medium-gray);
+    border-radius: var(--border-radius-2);
     color: var(--checkmark-color);
+    transition: all 200ms;
   }
 
-  .checkbox-module-y3eBg .checkbox-module-Yhrdp {
+  .checkbox-module-YNVdd .checkbox-module-pHIwh {
     width: 1rem;
     height: 1rem;
     fill: none;
-    stroke: currentColor;
-    stroke-width: 2px;
-    stroke-linecap: round;
+    stroke: currentcolor;
     stroke-dasharray: 22px;
     stroke-dashoffset: 66;
+    stroke-linecap: round;
+    stroke-width: 2px;
     transition: all 200ms;
   }
 
-  .checkbox-module-y3eBg[data-pressed] .checkbox-module-TqLux {
+  .checkbox-module-YNVdd[data-disabled] .checkbox-module-UKoyf {
+    border-color: var(--color-transparent);
+    background-color: var(--disabled-color);
+    color: var(--disabled-checkmark-color);
+  }
+
+  .checkbox-module-YNVdd[data-pressed] .checkbox-module-UKoyf {
     border-color: var(--color-brand-dark-gray);
   }
 
-  .checkbox-module-y3eBg.checkbox-module-zoTSP .checkbox-module-TqLux, .checkbox-module-y3eBg.checkbox-module-sHmzp .checkbox-module-TqLux, .checkbox-module-y3eBg[data-focus-visible] .checkbox-module-TqLux {
+  .checkbox-module-YNVdd.checkbox-module-v23jy .checkbox-module-UKoyf, .checkbox-module-YNVdd.checkbox-module-7UG-b .checkbox-module-UKoyf, .checkbox-module-YNVdd[data-focus-visible] .checkbox-module-UKoyf {
+      box-shadow: var(--shadow-focus-outline-padded);
       outline: 2px solid var(--color-brand-white);
-      outline-offset: 0px;
-      box-shadow: 0 0 8px 2px var(--color-brand-red);
+      outline-offset: 0;
     }
 
-  .checkbox-module-y3eBg[data-selected] .checkbox-module-TqLux, .checkbox-module-y3eBg[data-indeterminate] .checkbox-module-TqLux {
+  .checkbox-module-YNVdd[data-selected] .checkbox-module-UKoyf, .checkbox-module-YNVdd[data-indeterminate] .checkbox-module-UKoyf {
       border-color: var(--selected-color);
       background: var(--selected-color);
     }
 
-  .checkbox-module-y3eBg[data-selected][data-pressed] .checkbox-module-TqLux, .checkbox-module-y3eBg[data-indeterminate][data-pressed] .checkbox-module-TqLux {
+  .checkbox-module-YNVdd[data-selected][data-pressed] .checkbox-module-UKoyf, .checkbox-module-YNVdd[data-indeterminate][data-pressed] .checkbox-module-UKoyf {
       border-color: var(--selected-color-pressed);
       background: var(--selected-color-pressed);
     }
 
-  .checkbox-module-y3eBg[data-selected] .checkbox-module-Yhrdp, .checkbox-module-y3eBg[data-indeterminate] .checkbox-module-Yhrdp {
+  .checkbox-module-YNVdd[data-selected] .checkbox-module-pHIwh, .checkbox-module-YNVdd[data-indeterminate] .checkbox-module-pHIwh {
       stroke-dashoffset: 44;
     }
 
-  .checkbox-module-y3eBg[data-indeterminate] .checkbox-module-Yhrdp {
-      stroke: none;
+  .checkbox-module-YNVdd[data-indeterminate] .checkbox-module-pHIwh {
       fill: var(--checkmark-color);
+      stroke: none;
     }
 
-  .checkbox-module-y3eBg[data-disabled] .checkbox-module-TqLux {
-    border-color: var(--color-transparent);
-    background-color: var(--disabled-color);
-    color: var(--disabled-checkmark-color);
+.textarea-module-C6Xr1 {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  border: none;
+  border-radius: var(--border-radius-8);
+  background-color: var(--color-brand-light-gray);
+}
+
+  .textarea-module-C6Xr1:has([data-disabled]) {
+    background-color: var(--color-gray-50);
+    color: var(--color-gray-500);
   }
+
+  .textarea-module-C6Xr1:has([data-focused]) {
+    box-shadow: 0 0 8px 2px var(--color-brand-red);
+    outline: 0;
+  }
+
+  .textarea-module-C6Xr1:has([data-invalid])::after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    height: 2px;
+    background-color: var(--color-brand-red);
+    content: '';
+  }
+
+  .textarea-module-C6Xr1 textarea {
+    all: unset;
+    box-sizing: border-box;
+    padding: 13px var(--space-16);
+    font: inherit;
+  }
+
+  .textarea-module-C6Xr1.textarea-module-vksG- textarea,
+    .textarea-module-C6Xr1.textarea-module-vksG- .textarea-module-C6Xr1 {
+      min-height: var(--space-44);
+    }
+
+  .textarea-module-C6Xr1.textarea-module-vksG- textarea {
+      padding: var(--space-16);
+    }
+
+  .textarea-module-C6Xr1.textarea-module-6JrQJ textarea,
+    .textarea-module-C6Xr1.textarea-module-6JrQJ .textarea-module-C6Xr1 {
+      min-height: var(--space-40);
+    }
+
+  .textarea-module-C6Xr1.textarea-module-6JrQJ textarea {
+      padding: 11px var(--space-8);
+    }
+
+.text-field-module-JeaK0 {
+  all: unset;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-4);
+}
+
+  .text-field-module-JeaK0 span:empty {
+    display: none;
+  }
+
+.product-overview-grid-module-bzys- {
+  --amount-of-columns: 1;
+  --column-gap: 0;
+  --row-gap: var(--space-16);
+
+  display: grid;
+  width: 100%;
+  gap: var(--row-gap) var(--column-gap);
+  grid-template-columns: repeat(var(--amount-of-columns), 1fr);
+}
+
+.product-overview-grid-module-MlUVA {
+  container-type: inline-size;
+}
+
+.product-overview-grid-module-MlUVA:not(:last-child)::before {
+    position: absolute;
+    top: calc(100% + var(--row-gap) / 2);
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background-image: linear-gradient(
+      to right,
+      var(--color-white),
+      #e0dfdf 10%,
+      #bdbcbc 51%,
+      #e0dfdf 90%,
+      var(--color-white)
+    );
+    content: '';
+  }
+
+.product-overview-grid-module-MlUVA:has(> :hover) {
+    z-index: 1;
+  }
+
+@media (width >= 576px) {
+  .product-overview-grid-module-bzys- {
+    --amount-of-columns: 2;
+    --row-gap: 0;
+    --column-gap: var(--space-16);
+  }
+    .product-overview-grid-module-MlUVA::before {
+      display: none;
+    }
+
+    .product-overview-grid-module-MlUVA::after {
+      position: absolute;
+      top: 0;
+      left: calc(100% + var(--column-gap) / 2);
+      width: 1px;
+      height: 100%;
+      background-image: linear-gradient(
+        to bottom,
+        var(--color-white),
+        #e0dfdf 10%,
+        #bdbcbc 51%,
+        #e0dfdf 90%,
+        var(--color-white)
+      );
+      content: '';
+    }
+      .product-overview-grid-module-MlUVA:nth-child(2n)::after {
+        display: none;
+      }
+      .product-overview-grid-module-MlUVA:has(> :hover)::after, .product-overview-grid-module-MlUVA:has(+ .product-overview-grid-module-MlUVA:hover)::after {
+        display: none;
+      }
+}
+
+@media (width >= 1440px) {
+  .product-overview-grid-module-bzys- {
+    --amount-of-columns: 3;
+  }
+      .product-overview-grid-module-MlUVA:nth-child(2n)::after {
+        display: block;
+      }
+      .product-overview-grid-module-MlUVA:nth-child(3n)::after {
+        display: none;
+      }
+}