@sonic-equipment/ui 156.0.0 → 158.0.0

package/dist/styles.css

@@ -640,13 +640,13 @@
 .icon-button-module-4PDK- {
   all: unset;
   display: flex;
-  min-width: 48px;
-  min-height: 48px;
   align-items: center;
   justify-content: center;
   border: none;
   background-color: transparent;
   cursor: pointer;
+  min-block-size: 48px;
+  min-inline-size: 48px;
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -662,13 +662,13 @@
 *********************************************************/
 
 .icon-button-module-k3s9J svg {
-    width: 24px;
-    height: 24px;
+    block-size: 24px;
+    inline-size: 24px;
   }
 
 .icon-button-module-agk6Y svg {
-    width: 32px;
-    height: 32px;
+    block-size: 32px;
+    inline-size: 32px;
   }
 
 /*********************************************************
@@ -689,6 +689,10 @@
   color: currentcolor;
 }
 
+.icon-button-module-fTeP4:focus-visible, .icon-button-module-dM0eo:focus-visible {
+    color: var(--color-brand-red);
+  }
+
 @media (hover: hover) {
     .icon-button-module-fTeP4:hover, .icon-button-module-dM0eo:hover {
       color: var(--color-brand-red);
@@ -1031,6 +1035,21 @@
     gap: var(--space-4);
   }
 
+.label-module-LGfJt {
+  all: unset;
+  cursor: pointer;
+  font-weight: var(--font-weight-bold);
+}
+
+  .label-module-LGfJt:has(+ div [data-disabled]) {
+    cursor: default;
+  }
+
+  .label-module-LGfJt :where(.label-module-oTWaS) {
+    color: var(--color-brand-red);
+    margin-inline-start: var(--space-4);
+  }
+
 .checkbox-module-YNVdd {
   --selected-color: var(--color-brand-red);
   --selected-color-pressed: var(--color-brand-dark-red);
@@ -1041,12 +1060,11 @@
   all: unset;
   display: flex;
   box-sizing: border-box;
-  align-items: center;
+  align-items: baseline;
   color: var(--color-brand-black);
   cursor: pointer;
   font-size: var(--font-size-14);
   forced-color-adjust: none;
-  gap: 6px;
 }
 
   .checkbox-module-YNVdd .checkbox-module-UKoyf {
@@ -1054,6 +1072,7 @@
     width: 16px;
     height: 16px;
     box-sizing: border-box;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     border: 2px solid var(--color-brand-medium-gray);
@@ -1073,7 +1092,9 @@
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-width: 1.45;
-    transition: all 200ms, stroke-dashoffset 600ms;
+    transition:
+      all 200ms,
+      stroke-dashoffset 600ms;
   }
 
   .checkbox-module-YNVdd[data-disabled] {
@@ -1085,7 +1106,7 @@
     border-color: var(--color-brand-dark-gray);
   }
 
-  .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 {
+  .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: 0;
@@ -1126,12 +1147,12 @@
   .checkbox-module-YNVdd.checkbox-module-nEhvW[data-selected] .checkbox-module-UKoyf, .checkbox-module-YNVdd.checkbox-module-nEhvW[data-indeterminate] .checkbox-module-UKoyf {
         border: 1px solid var(--color-brand-red);
         background: unset;
-        background-image: linear-gradient(
-            var(--selected-color),
-            var(--selected-color)
-          ),
+        background-image:
+          linear-gradient(var(--selected-color), var(--selected-color)),
           linear-gradient(var(--selected-color), var(--selected-color));
-        background-position: 2px 2px, 14px 14px;
+        background-position:
+          2px 2px,
+          14px 14px;
         background-repeat: no-repeat;
         background-size: 10px 10px;
       }
@@ -1141,10 +1162,185 @@
       opacity: 0.4;
     }
 
+  .checkbox-module-YNVdd .checkbox-module-ITd8W:not(:empty) {
+    font-weight: unset;
+    margin-inline-start: var(--space-8);
+  }
+
+.tooltip-module-T-DtX {
+  --tooltip-bg-color: var(--color-gray-800);
+
+  display: inline-block;
+  padding: var(--space-12) var(--space-16);
+  border-radius: var(--border-radius-8);
+  background: var(--tooltip-bg-color);
+  color: var(--color-white);
+  font-size: var(--font-size-14);
+  line-height: 1.14;
+  max-inline-size: 40ch;
+  overflow-wrap: break-word;
+}
+
+  .tooltip-module-T-DtX .tooltip-module-CBW5f svg {
+    display: block;
+    margin: -6px 1px 0;
+    fill: var(--tooltip-bg-color);
+    stroke: var(--tooltip-bg-color);
+    stroke-width: 1px;
+  }
+
+  .tooltip-module-T-DtX[data-placement='top']:has(.tooltip-module-CBW5f) {
+      margin-block-end: 6px;
+    }
+
+  .tooltip-module-T-DtX[data-placement='bottom']:has(.tooltip-module-CBW5f) {
+      margin-block-start: 6px;
+    }
+
+  .tooltip-module-T-DtX[data-placement='bottom'] .tooltip-module-CBW5f svg {
+      margin: 0 1px -6px;
+      transform: rotate(180deg);
+    }
+
+  .tooltip-module-T-DtX[data-placement='right']:has(.tooltip-module-CBW5f) {
+      margin-inline-start: 6px;
+    }
+
+  .tooltip-module-T-DtX[data-placement='right'] .tooltip-module-CBW5f svg {
+      margin: 1px -6px 1px 0;
+      transform: rotate(90deg);
+    }
+
+  .tooltip-module-T-DtX[data-placement='left']:has(.tooltip-module-CBW5f) {
+      margin-inline-end: 6px;
+    }
+
+  .tooltip-module-T-DtX[data-placement='left'] .tooltip-module-CBW5f svg {
+      margin: 1px 0 1px -6px;
+      transform: rotate(-90deg);
+    }
+
+  .tooltip-module-T-DtX[data-entering] {
+    animation: tooltip-module-zl1q9 200ms;
+  }
+
+  .tooltip-module-T-DtX[data-exiting] {
+    animation: tooltip-module-zl1q9 200ms reverse ease-in;
+  }
+
+  .tooltip-module-T-DtX ul {
+    padding: 0 0 0 1.2em;
+    margin: var(--space-8) 0 0;
+  }
+
+.tooltip-module-DRHoc {
+  display: inline-flex;
+}
+
+.tooltip-module-DRHoc .tooltip-module-3q6nr {
+    color: currentcolor;
+    min-block-size: unset;
+    min-inline-size: unset;
+  }
+
+.tooltip-module-DRHoc .tooltip-module-3q6nr:hover {
+      color: var(--color-primary);
+    }
+
+/* stylelint-disable-next-line selector-class-pattern */
+
+.react-aria-Dialog {
+  outline: 0;
+}
+
+@keyframes tooltip-module-zl1q9 {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.info-icon-tooltip-module-oR4nD {
+  --color-trigger: var(--color-brand-medium-gray);
+  --color-trigger-hover: var(--color-brand-dark-gray);
+  --color-trigger-active: var(--color-brand-dark-gray);
+
+  display: inline-flex;
+}
+
+  .info-icon-tooltip-module-oR4nD.info-icon-tooltip-module-5zfDr {
+    --color-trigger: currentcolor;
+    --color-trigger-hover: color-mix(in srgb, currentcolor, #000 20%);
+    --color-trigger-active: color-mix(in srgb, currentcolor, #000 20%);
+  }
+
+  .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K {
+    border-radius: 50%;
+    color: var(--color-trigger);
+    min-block-size: unset;
+    min-inline-size: unset;
+  }
+
+  .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K:hover {
+      color: var(--color-trigger-hover);
+    }
+
+  .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K:focus-visible {
+      box-shadow: var(--shadow-focus-outline);
+    }
+
+  .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K[aria-expanded='true'] {
+      color: var(--color-trigger-active);
+    }
+
 .field-error-module-FXnIg {
   color: var(--color-brand-red);
 }
 
+.form-field-layout-module-ATB1W {
+  display: grid;
+  gap: 0;
+  grid-template: repeat(3, min-content) / 1fr auto;
+  grid-template-areas:
+    'label .'
+    'field info'
+    'error .';
+}
+
+  .form-field-layout-module-ATB1W .form-field-layout-module-3tbc7 {
+    display: grid;
+    grid-area: label;
+  }
+
+  .form-field-layout-module-ATB1W .form-field-layout-module-3tbc7:not(:empty) {
+      margin-block-end: var(--space-4);
+    }
+
+  .form-field-layout-module-ATB1W .form-field-layout-module-vT6Gy {
+    display: grid;
+    align-self: center;
+    grid-area: field;
+  }
+
+  .form-field-layout-module-ATB1W .form-field-layout-module-UcHO- {
+    display: grid;
+    align-self: center;
+    grid-area: info;
+    margin-inline-start: var(--space-4);
+  }
+
+  .form-field-layout-module-ATB1W .form-field-layout-module-Pfatk {
+    display: grid;
+    grid-area: error;
+  }
+
+  .form-field-layout-module-ATB1W .form-field-layout-module-Pfatk:not(:empty) {
+      margin-block-start: var(--space-4);
+    }
+
 /*************************************************************************
  * Shared Text Field Styles
  *************************************************************************/
@@ -1212,143 +1408,110 @@
       background-color: var(--color-brand-red);
       content: '';
     }
+/* growing input field */
+.input-module-2woJR:has(.input-module-6HwY4) {
+    justify-self: flex-start;
+  }
 .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;
+    display: inline-grid;
   }
+.input-module-2woJR .input-module-6HwY4 .input-module-pNKEt,
+    .input-module-2woJR .input-module-6HwY4 input {
+      min-width: 2.35em;
+      grid-area: 1 / 1;
+    }
 .input-module-2woJR .input-module-6HwY4 input {
-    text-align: center;
-  }
+      text-align: center;
+    }
 .input-module-2woJR .input-module-6HwY4 .input-module-pNKEt {
-    display: block;
-    visibility: hidden;
-    white-space: nowrap;
-  }
+      display: block;
+      visibility: hidden;
+      white-space: nowrap;
+    }
 /* account for inline element when growing */
 .input-module-2woJR .input-module-6HwY4 .input-module-oeAz2 + .input-module-pNKEt {
-    margin-right: var(--space-24);
-  }
+      margin-right: var(--space-24);
+    }
 .input-module-2woJR .input-module-zjVxG {
-  display: inline-grid;
-  width: 100%;
-  align-items: center;
-  grid-template-columns: 1fr 0;
-}
-.input-module-2woJR .input-module-zjVxG input:has(+ .input-module-oeAz2) {
-    padding-right: var(--space-36);
-    margin-right: -20px;
+    display: inline-grid;
+    width: 100%;
+    align-items: center;
+    grid-template-columns: 1fr 0;
   }
+.input-module-2woJR .input-module-zjVxG input:has(+ .input-module-oeAz2) {
+      padding-right: var(--space-36);
+      margin-right: -20px;
+    }
 .input-module-2woJR .input-module-zjVxG .input-module-oeAz2 {
-    display: inline-flex;
-    margin-left: calc(0px - var(--space-32));
-    color: var(--color-brand-dark-gray);
-  }
+      display: inline-flex;
+      margin-left: calc(0px - var(--space-32));
+      color: var(--color-brand-dark-gray);
+    }
 /* Don't show value-reveal button on empty password fields  */
 .input-module-2woJR .input-module-zjVxG input[type='password'] {
-    /* TODO: overwriting forced Spire style, remove !important in the future */
-    font-family: 'Verdana', sans-serif !important;
-    font-size: inherit !important;
-  }
-.input-module-2woJR .input-module-zjVxG input[type='password'] + .input-module-oeAz2 {
-      transition: all 0.2s ease;
+      /* TODO: overwriting forced Spire style, remove !important in the future */
+      font-family: 'Verdana', sans-serif !important;
+      font-size: inherit !important;
     }
+.input-module-2woJR .input-module-zjVxG input[type='password'] + .input-module-oeAz2 {
+        transition: all 0.2s ease;
+      }
 .input-module-2woJR .input-module-zjVxG input[type='password'][value=''] + .input-module-oeAz2 {
-      opacity: 0;
-      visibility: hidden;
-    }
+        opacity: 0;
+        visibility: hidden;
+      }
 .input-module-2woJR .input-module-zjVxG input[type='password']:not([value='']) + .input-module-oeAz2 {
-      opacity: 1;
-      visibility: visible;
-    }
-
-.label-module-LGfJt {
-  all: unset;
-  cursor: pointer;
-  font-weight: var(--font-weight-bold);
-}
-
-  .label-module-LGfJt:has(+ div [data-disabled]) {
-    cursor: default;
-  }
-
-  .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);
-}
+        opacity: 1;
+        visibility: visible;
+      }
 
-  .number-field-module-gmnog .number-field-module-8Lvgh {
+.number-field-module-xawWc .number-field-module-A1nvE {
     display: flex;
-    width: 100%;
-    align-items: stretch;
     justify-content: space-between;
   }
 
-  .number-field-module-gmnog .number-field-module-8Lvgh input {
-      min-width: var(--space-36);
-      transition: font-size 0.5s ease;
-    }
-
-  .number-field-module-gmnog .number-field-module-8Lvgh:has(button[data-pressed]) input {
+    .number-field-module-xawWc .number-field-module-A1nvE:has(button[data-pressed]) [class*='growing-input'] input {
         animation: number-field-module-OlEoa 100ms;
       }
+  .number-field-module-xawWc .number-field-module-lkZYQ {
+    --btn-bgcolor: transparent;
 
-  .number-field-module-gmnog .number-field-module-8Lvgh button {
-      all: unset;
-      position: relative;
-      display: flex;
-      width: var(--space-32);
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      font-size: var(--font-size-32);
-      -webkit-tap-highlight-color: transparent;
-      text-align: center;
-      -webkit-user-select: none;
-         -moz-user-select: none;
-              user-select: none;
-    }
-
-  .number-field-module-gmnog .number-field-module-8Lvgh button[data-pressed]::before {
-          position: absolute;
-          z-index: -1;
-          top: 50%;
-          left: 50%;
-          display: block;
-          width: 24px;
-          height: 24px;
-          border-radius: 50%;
-          margin-top: -12px;
-          margin-left: -12px;
-          background-color: var(--color-brand-light-gray);
-          content: '';
-        }
-
-  .number-field-module-gmnog .number-field-module-8Lvgh button[data-disabled] {
-        cursor: default;
-        opacity: 0.4;
+    all: unset;
+    display: grid;
+    cursor: pointer;
+    font-size: var(--font-size-32);
+    grid-template-areas: 'button';
+    inline-size: var(--space-32);
+    place-items: center;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+  .number-field-module-xawWc .number-field-module-lkZYQ[data-hovered] {
+      --btn-bgcolor: var(--color-brand-light-gray);
+    }
+  .number-field-module-xawWc .number-field-module-lkZYQ[data-hovered][data-pressed] {
+        --btn-bgcolor: var(--color-brand-medium-gray);
       }
-
-  .number-field-module-gmnog .number-field-module-8Lvgh svg {
+  .number-field-module-xawWc .number-field-module-lkZYQ[data-disabled] {
+      cursor: default;
+      opacity: 0.4;
+    }
+  .number-field-module-xawWc .number-field-module-lkZYQ:not([data-disabled])::before {
+        border-radius: 50%;
+        aspect-ratio: 1;
+        background-color: var(--btn-bgcolor);
+        content: '';
+        grid-area: button;
+        inline-size: 75%;
+      }
+  .number-field-module-xawWc .number-field-module-lkZYQ svg {
       width: 16px;
       height: 16px;
+      grid-area: button;
     }
 
-  .number-field-module-gmnog span:empty {
-    display: none;
-  }
-
 @keyframes number-field-module-OlEoa {
   0%,
   100% {
@@ -1624,6 +1787,7 @@
   --tag-bg-color: var(--color-brand-red);
   --tag-fg-color: var(--color-brand-white);
 
+  z-index: 0;
   display: inline-flex;
   height: var(--tag-height);
 }
@@ -1716,17 +1880,16 @@
 }
 
 .add-to-cart-button-module-AWFvQ {
-  display: inline-flex;
+  display: flex;
   flex-direction: row;
-  align-items: center;
-  justify-content: center;
   gap: var(--space-4);
+  margin-inline-start: 32px;
+  place-items: center;
 }
 
-.add-to-cart-button-module-SS7WM {
-  display: inline-block;
-  width: 28px;
-}
+.add-to-cart-button-module-AWFvQ > * {
+    flex-shrink: 0;
+  }
 
 .toast-module-VzLw4 {
   --inline-padding: var(--space-16);
@@ -2298,7 +2461,7 @@
       right: -8px;
     }
 
-  .dialog-module-qKzgy .dialog-module-y7Axm {
+  .dialog-module-qKzgy .dialog-module-y7Axm:not(:empty) {
     display: flex;
     flex-direction: column;
     margin-top: var(--space-32);
@@ -2488,126 +2651,6 @@
   max-width: 425px;
 }
 
-.tooltip-module-T-DtX {
-  --tooltip-bg-color: var(--color-gray-800);
-
-  display: inline-block;
-  padding: var(--space-12) var(--space-16);
-  border-radius: var(--border-radius-8);
-  background: var(--tooltip-bg-color);
-  color: var(--color-white);
-  font-size: var(--font-size-14);
-  line-height: 1.14;
-  max-inline-size: 250px;
-  overflow-wrap: break-word;
-}
-
-  .tooltip-module-T-DtX .tooltip-module-CBW5f svg {
-    display: block;
-    fill: var(--tooltip-bg-color);
-    stroke: var(--tooltip-bg-color);
-    stroke-width: 1px;
-  }
-
-  .tooltip-module-T-DtX[data-placement='top']:has(.tooltip-module-CBW5f) {
-      margin-block-end: 6px;
-    }
-
-  .tooltip-module-T-DtX[data-placement='bottom']:has(.tooltip-module-CBW5f) {
-      margin-block-start: 6px;
-    }
-
-  .tooltip-module-T-DtX[data-placement='bottom'] .tooltip-module-CBW5f svg {
-      transform: rotate(180deg);
-    }
-
-  .tooltip-module-T-DtX[data-placement='right']:has(.tooltip-module-CBW5f) {
-      margin-inline-start: 6px;
-    }
-
-  .tooltip-module-T-DtX[data-placement='right'] .tooltip-module-CBW5f svg {
-      transform: rotate(90deg);
-    }
-
-  .tooltip-module-T-DtX[data-placement='left']:has(.tooltip-module-CBW5f) {
-      margin-inline-end: 6px;
-    }
-
-  .tooltip-module-T-DtX[data-placement='left'] .tooltip-module-CBW5f svg {
-      transform: rotate(-90deg);
-    }
-
-  .tooltip-module-T-DtX[data-entering] {
-    animation: tooltip-module-zl1q9 200ms;
-  }
-
-  .tooltip-module-T-DtX[data-exiting] {
-    animation: tooltip-module-zl1q9 200ms reverse ease-in;
-  }
-
-.tooltip-module-DRHoc {
-  display: inline-flex;
-}
-
-.tooltip-module-DRHoc .tooltip-module-3q6nr {
-    color: currentcolor;
-    min-block-size: unset;
-    min-inline-size: unset;
-  }
-
-.tooltip-module-DRHoc .tooltip-module-3q6nr:hover {
-      color: var(--color-primary);
-    }
-
-/* stylelint-disable-next-line selector-class-pattern */
-
-.react-aria-Dialog {
-  outline: 0;
-}
-
-@keyframes tooltip-module-zl1q9 {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.info-icon-tooltip-module-oR4nD {
-  --color-trigger: var(--color-brand-medium-gray);
-  --color-trigger-hover: var(--color-brand-dark-gray);
-  --color-trigger-active: var(--color-brand-dark-gray);
-
-  display: inline-flex;
-}
-
-  .info-icon-tooltip-module-oR4nD.info-icon-tooltip-module-5zfDr {
-    --color-trigger: currentcolor;
-    --color-trigger-hover: color-mix(in srgb, currentcolor, #000 20%);
-    --color-trigger-active: color-mix(in srgb, currentcolor, #000 20%);
-  }
-
-  .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K {
-    border-radius: 50%;
-    color: var(--color-trigger);
-    min-block-size: unset;
-    min-inline-size: unset;
-  }
-
-  .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K:hover {
-      color: var(--color-trigger-hover);
-    }
-
-  .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K:focus-visible {
-      box-shadow: var(--shadow-focus-outline);
-    }
-
-  .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K[aria-expanded='true'] {
-      color: var(--color-trigger-active);
-    }
-
 .delivery-time-module-fEWEl {
   display: flex;
   align-items: center;
@@ -2621,18 +2664,7 @@
     margin: 0;
   }
 
-/* @property --price-larger {
-  initial-value: false;
-  syntax: '<boolean>';
-}
-
-@property --price-baseline {
-  initial-value: false;
-  syntax: '<boolean>';
-} */
-
 /* Singular prices */
-
 .price-module-Qyyas {
   display: inline-grid;
   color: var(--color, inherit);
@@ -2646,13 +2678,11 @@
   vertical-align: baseline;
   white-space: nowrap;
 }
-
 .price-module-Qyyas > * {
     display: inline-block;
     -webkit-text-decoration: var(--text-decoration);
             text-decoration: var(--text-decoration);
   }
-
 .price-module-Qyyas .price-module--Oil0 {
     font-size: var(--font-size-symbol);
     font-weight: var(--font-weight-symbol);
@@ -2661,18 +2691,15 @@
     margin-block-start: var(--margin-block-symbol);
     margin-inline-end: var(--margin-inline-symbol);
   }
-
 .price-module-Qyyas .price-module-QnS4t {
     display: inline-flex;
     grid-area: number;
   }
-
 .price-module-Qyyas .price-module-p8hAn {
     font-size: var(--font-size-fraction);
     margin-block-start: var(--margin-block-fraction);
     margin-inline-start: var(--margin-inline-fraction);
   }
-
 .price-module-Qyyas.price-module-vUbWV {
     --color: var(--color-brand-black);
     --font-family: var(--font-family-sonic);
@@ -2687,17 +2714,14 @@
     --margin-inline-fraction: -0.35em;
     --margin-inline-symbol: 0.05em;
   }
-
 .price-module-Qyyas.price-module-vUbWV .price-module-9HAVF {
       inline-size: 0;
     }
-
 .price-module-Qyyas.price-module-vUbWV.price-module-bpZpP {
       --color: var(--color-brand-red);
       --font-style: italic;
       --margin-inline-fraction: -0.25em;
     }
-
 .price-module-Qyyas.price-module-vUbWV.price-module-TEd4d {
       --font-size: calc(var(--base-font-size) * 0.5);
       --font-size-fraction: var(--font-size);
@@ -2705,18 +2729,14 @@
       --margin-inline-fraction: unset;
       --margin-inline-symbol: 0.25em;
     }
-
 .price-module-Qyyas.price-module-vUbWV .price-module--Oil0 {
       text-decoration: none;
     }
-
 .price-module-Qyyas.price-module-fydQn {
     --color: var(--color-brand-dark-gray);
     --text-decoration: line-through;
   }
-
 /* Price composite component */
-
 .price-module-tbuNk {
   /* https://kizu.dev/cyclic-toggles/#limitations */
 
@@ -2742,35 +2762,28 @@
   inline-size: max-content;
   vertical-align: baseline;
 }
-
 .price-module-tbuNk .price-module-ZURYg {
     color: var(--color-ppu, inherit);
     font-size: var(--font-size-ppu, inherit);
     white-space: nowrap;
   }
-
 .price-module-tbuNk .price-module-ZURYg::before {
       content: '(';
     }
-
 .price-module-tbuNk .price-module-ZURYg::after {
       content: ')';
     }
-
 .price-module-tbuNk .price-module-uVTD7 {
     color: var(--color-vat, inherit);
     font-size: var(--font-size-vat, inherit);
     white-space: nowrap;
   }
-
 .price-module-tbuNk .price-module-uVTD7::before {
       content: '(';
     }
-
 .price-module-tbuNk .price-module-uVTD7::after {
       content: ')';
     }
-
 .price-module-tbuNk:where(.price-module-vUbWV) {
     --base-font-size: var(--price-size-normal, var(--font-size-32))
       var(--price-size-larger, var(--font-size-36));
@@ -2793,14 +2806,12 @@
     margin-block-end: var(--vertical-offset);
     translate: 0 var(--vertical-offset);
   }
-
 .price-module-tbuNk:where(.price-module-vUbWV):has(.price-module-x77Vd) {
       --vertical-offset: var(
         --price-baseline-shifted,
         calc(var(--base-font-size) * -0.9375 - 1px)
       );
     }
-
 .price-module-tbuNk:where(.price-module-vUbWV) .price-module-x77Vd {
       position: relative;
       grid-column: 1 / -1;
@@ -2809,26 +2820,21 @@
       justify-self: flex-start;
       margin-block-end: -2px;
     }
-
 .price-module-tbuNk:where(.price-module-vUbWV) .price-module-9XVqt {
       grid-column: 1 / -1;
       grid-template-columns: subgrid;
       justify-self: flex-start;
     }
-
 .price-module-tbuNk:where(.price-module-vUbWV) .price-module-ZURYg {
       grid-column: 1 / -1;
     }
-
 .price-module-tbuNk:where(.price-module-vUbWV) .price-module-ZURYg::before,
       .price-module-tbuNk:where(.price-module-vUbWV) .price-module-ZURYg::after {
         content: none;
       }
-
 .price-module-tbuNk:where(.price-module-vUbWV) .price-module-uVTD7 {
       grid-column: 1 / -1;
     }
-
 .price-module-tbuNk:where(.price-module-vUbWV) .price-module-uVTD7::before,
       .price-module-tbuNk:where(.price-module-vUbWV) .price-module-uVTD7::after {
         content: none;
@@ -2841,12 +2847,15 @@
 }
 
 .orderline-card-module-AMTMm {
+  --z-link: 1;
+  --z-top: 2;
+
   all: unset;
   position: relative;
+  z-index: 0;
   display: grid;
   padding: var(--space-16);
   background-color: var(--color-white);
-  cursor: pointer;
   gap: 0 var(--space-16);
   grid-template:
     143px var(--space-12) repeat(3, minmax(0, min-content)) minmax(
@@ -2878,15 +2887,29 @@
 
   .orderline-card-module-AMTMm .orderline-card-module-0CunP {
     position: absolute;
+    z-index: var(--z-top);
     inset-block-start: 0;
     inset-inline-end: 0;
   }
 
   .orderline-card-module-AMTMm .orderline-card-module-C8xE6 {
+    position: static;
+    color: var(--color-brand-black);
+    font-size: var(--font-size-20);
+    font-weight: var(--font-weight-bold);
     grid-area: title;
+    line-height: 1;
     margin-block-end: var(--space-8);
   }
 
+  .orderline-card-module-AMTMm .orderline-card-module-C8xE6[href]::after {
+      position: absolute;
+      z-index: var(--z-link);
+      background: transparent;
+      content: '';
+      inset: 0;
+    }
+
   .orderline-card-module-AMTMm .orderline-card-module-gXavY {
     display: flex;
     flex-wrap: wrap;
@@ -2910,8 +2933,9 @@
   }
 
   .orderline-card-module-AMTMm .orderline-card-module-ZjAaX {
-    align-self: center;
+    z-index: var(--z-top);
     grid-area: amount;
+    place-self: center flex-start;
   }
 
   .orderline-card-module-AMTMm .orderline-card-module-q3yjo {
@@ -2932,16 +2956,19 @@
     }
 
   .orderline-card-module-AMTMm .orderline-card-module-N-Oe- {
+    z-index: var(--z-top);
     grid-area: info;
     margin-block-start: var(--space-8);
   }
 
   @container (inline-size >= 576px) {.orderline-card-module-AMTMm {
     padding: 32px 64px 32px 0;
-    grid-template: repeat(3, minmax(0, min-content)) minmax(8px, 1fr) repeat(
+    grid-template:
+      repeat(3, minmax(0, min-content)) minmax(8px, 1fr) repeat(
         2,
         minmax(0, min-content)
-      ) / 143px 1fr auto;
+      )
+      / 143px 1fr auto;
     grid-template-areas:
       'image tags tags'
       'image title title'
@@ -2988,14 +3015,18 @@
 .product-card-module-pLaiB {
   --title-font-size: var(--font-size-16);
   --box-shadow: var(--box-shadow-medium);
+  --z-link: 1;
+  --z-top: 2;
 
   position: relative;
+  z-index: 0;
   display: grid;
   padding: var(--space-12);
   background-color: var(--color-white);
   block-size: 100%;
   color: var(--color-black);
-  cursor: pointer;
+
+  /* cursor: pointer; */
   gap: 0 var(--space-8);
   grid-template:
     122px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
@@ -3019,6 +3050,13 @@
     box-shadow ease 0.2s;
 }
 
+@media (hover: hover) {
+    .product-card-module-pLaiB:has(.product-card-module-CStNi[href]):hover {
+      box-shadow: var(--box-shadow);
+      scale: 1.04;
+    }
+  }
+
 .product-card-module-pLaiB,
   .product-card-module-pLaiB * {
     box-sizing: border-box;
@@ -3026,15 +3064,21 @@
 
 .product-card-module-pLaiB .product-card-module-tvEdz {
     position: absolute;
+    z-index: var(--z-top);
     inset-block-start: 0;
     inset-inline-end: 0;
   }
 
 .product-card-module-pLaiB .product-card-module-CStNi {
+    position: static;
+    display: block;
     display: -webkit-box;
     overflow: hidden;
     -webkit-box-orient: vertical;
+    box-shadow: none;
+    color: var(--color-brand-black);
     font-size: var(--title-font-size);
+    font-weight: var(--font-weight-bold);
     grid-area: title;
     -webkit-line-clamp: 4;
     line-height: 1;
@@ -3043,9 +3087,22 @@
     text-wrap: balance;
   }
 
+.product-card-module-pLaiB .product-card-module-CStNi[href]::after {
+      position: absolute;
+      z-index: var(--z-link);
+      background: transparent;
+      content: '';
+      inset: 0;
+    }
+
+.product-card-module-pLaiB .product-card-module-CStNi:focus-visible::after {
+      box-shadow: var(--shadow-focus-outline);
+    }
+
 .product-card-module-pLaiB .product-card-module-CStNi mark {
       background-color: rgb(109 170 200 / 40%);
       color: currentcolor;
+      font: inherit;
     }
 
 .product-card-module-pLaiB .product-card-module-nL-hY {
@@ -3077,15 +3134,10 @@
   }
 
 .product-card-module-pLaiB .product-card-module-SnCvX {
+    z-index: var(--z-top);
+    cursor: default;
     grid-area: amount;
-    place-self: flex-end flex-end;
-  }
-
-@media (hover: hover) {
-    .product-card-module-pLaiB:hover {
-      box-shadow: var(--box-shadow);
-      scale: 1.04;
-    }
+    place-self: flex-end flex-start;
   }
 
 @container (min-width: 273px) {
@@ -3098,7 +3150,7 @@
         var(--space-16),
         1fr
       )
-      minmax(0, min-content) / 1fr minmax(0, min-content);
+      minmax(0, min-content) / 1fr minmax(0, max-content);
     grid-template-areas:
       'image image'
       '. .'
@@ -4289,19 +4341,167 @@ button.swiper-pagination-bullet {
     margin: 0;
   }
 
-.country-selector-dialog-module-mMJS0 {
-  max-width: 342px;
-  padding: var(--space-36) var(--space-24);
+.select-field-module-6Mz-Y {
+  --button-height: var(--space-44);
+  --button-gap: var(--space-8);
+  --button-border-color: var(--color-brand-medium-gray);
+  --button-bg-color: var(--color-white);
+  --trigger-width: initial;
+
+  position: relative;
 }
 
-  .country-selector-dialog-module-mMJS0 .country-selector-dialog-module-z-ZqY {
+  .select-field-module-6Mz-Y:where(.select-field-module-CSbmU) {
+    --button-height: var(--space-36);
+    --button-gap: var(--space-4);
+  }
+
+  .select-field-module-6Mz-Y:where(.select-field-module--Ocnn) {
+    --button-border-color: var(--color-brand-light-gray);
+    --button-bg-color: var(--color-brand-light-gray);
+  }
+
+  .select-field-module-6Mz-Y:where(.select-field-module-nT7fi) {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .select-field-module-6Mz-Y .select-field-module-GkFBV {
+    all: unset;
+    position: relative;
     display: grid;
+    overflow: hidden;
+    align-items: center;
+    border: 1px solid var(--button-border-color);
+    border-radius: var(--border-radius-8);
+    background: var(--button-bg-color);
+    block-size: var(--button-height);
+    font: inherit;
+    gap: var(--button-gap);
+    grid-template-areas: 'value icon';
+    grid-template-columns: 1fr 24px;
+    outline: none;
+    padding-inline: 16px 8px;
   }
 
-  .country-selector-dialog-module-mMJS0 .country-selector-dialog-module-z-ZqY .country-selector-dialog-module-7VjsF {
-      display: block;
-      margin-bottom: var(--space-16);
-      margin-inline: auto;
+  .select-field-module-6Mz-Y .select-field-module-GkFBV [slot='description'] {
+      display: none;
+    }
+
+  .select-field-module-6Mz-Y .select-field-module-GkFBV[data-focused],
+    .select-field-module-6Mz-Y .select-field-module-GkFBV[data-pressed] {
+      border-color: transparent;
+      box-shadow: var(--shadow-focus-outline);
+      outline: none;
+    }
+
+  .select-field-module-6Mz-Y .select-field-module-GkFBV[disabled] {
+      opacity: 0.4;
+    }
+
+  .select-field-module-6Mz-Y .select-field-module-GkFBV .select-field-module-qQmvX {
+      overflow: hidden;
+      grid-area: value;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+  .select-field-module-6Mz-Y .select-field-module-GkFBV .select-field-module-yhZMK {
+      block-size: 12px;
+      grid-area: icon;
+      inline-size: 12px;
+      justify-self: center;
+    }
+
+  .select-field-module-6Mz-Y[data-invalid] .select-field-module-GkFBV {
+    border-bottom-color: var(--color-brand-red);
+  }
+
+  .select-field-module-6Mz-Y[data-invalid] .select-field-module-GkFBV::after {
+      position: absolute;
+      background-color: var(--color-brand-red);
+      block-size: 1px;
+      content: '';
+      inset: auto 0 0;
+    }
+
+.select-field-module--7nQi {
+  overflow: auto;
+  background-color: var(--color-white);
+  box-shadow: var(--box-shadow-light);
+  inline-size: var(--trigger-width);
+  min-inline-size: -moz-fit-content;
+  min-inline-size: fit-content;
+  padding-block: var(--space-8);
+  transition: opacity 0.2s;
+}
+
+.select-field-module--7nQi[data-entering],
+  .select-field-module--7nQi[data-exiting] {
+    opacity: 0;
+  }
+
+.select-field-module--7nQi .select-field-module-O2abK {
+    outline: none;
+  }
+
+.select-field-module--7nQi .select-field-module-O7Ce- {
+    display: grid;
+    align-items: center;
+    color: var(--color-brand-dark-gray);
+    cursor: default;
+    grid-template-rows: minmax(24px, min-content);
+    line-height: 1;
+    outline: none;
+    overflow-wrap: break-word;
+    padding-block: var(--space-4);
+    padding-inline: calc(var(--space-24) + var(--space-2) + var(--space-4));
+  }
+
+.select-field-module--7nQi .select-field-module-KFavE {
+    display: grid;
+    align-items: center;
+    padding: var(--space-4);
+    cursor: pointer;
+    gap: var(--space-2);
+    grid-template: minmax(24px, min-content) / var(--space-24) 1fr var(
+        --space-24
+      );
+    grid-template-areas: 'icon label .';
+    line-height: 1;
+    outline: none;
+    overflow-wrap: break-word;
+  }
+
+.select-field-module--7nQi .select-field-module-KFavE [slot='description'] {
+      display: grid;
+      grid-area: icon;
+      justify-self: center;
+    }
+
+.select-field-module--7nQi .select-field-module-KFavE [slot='label'] {
+      grid-area: label;
+    }
+
+.select-field-module--7nQi .select-field-module-KFavE[data-hovered],
+    .select-field-module--7nQi .select-field-module-KFavE[data-focused] {
+      background-color: var(--color-brand-red);
+      color: var(--color-white);
+    }
+
+.country-selector-dialog-module-mMJS0 {
+  max-width: 342px;
+  padding: var(--space-36) var(--space-24);
+}
+
+  .country-selector-dialog-module-mMJS0 .country-selector-dialog-module-z-ZqY {
+    display: grid;
+  }
+
+  .country-selector-dialog-module-mMJS0 .country-selector-dialog-module-z-ZqY .country-selector-dialog-module-7VjsF {
+      display: block;
+      margin-bottom: var(--space-16);
+      margin-inline: auto;
     }
 
   .country-selector-dialog-module-mMJS0 .country-selector-dialog-module-z-ZqY .country-selector-dialog-module-IdVDt {
@@ -4454,6 +4654,176 @@ button.swiper-pagination-bullet {
         }
   }
 
+.checkbox-field-module-fdQEa {
+  justify-self: flex-start;
+}
+
+.message-module-N1e1t {
+  --color: var(--color-brand-black);
+
+  display: grid;
+  align-items: center;
+  padding: var(--space-8);
+  background: color-mix(in hsl, var(--color), transparent 88%);
+  font-size: var(--font-size-base);
+  grid-template-areas: 'icon body';
+  grid-template-columns: minmax(0, min-content) 1fr;
+}
+
+.message-module-w2hsL {
+  color: var(--color);
+  grid-area: icon;
+  margin-block: -3px;
+  margin-inline-end: var(--space-8);
+}
+
+.message-module-w2hsL svg {
+    display: block;
+  }
+
+.message-module-Gi4uR {
+  grid-area: body;
+  text-wrap: pretty;
+}
+
+/* variants */
+
+.message-module-pp9U4 {
+  background: var(--color-brand-light-gray);
+}
+
+.message-module-srkp1 {
+  --color: var(--color-semantic-information);
+}
+
+.message-module-oeSdr {
+  --color: var(--color-semantic-stop);
+}
+
+.message-module-Vp0pA {
+  --color: var(--color-semantic-okay);
+}
+
+.message-module-kvANQ {
+  --color: var(--color-semantic-notify);
+}
+
+.form-module-xD1fv {
+  display: grid;
+  container-type: inline-size;
+  gap: var(--space-16);
+  min-inline-size: 270px;
+}
+
+  .form-module-xD1fv .form-module-Hy5TM,
+  .form-module-xD1fv .form-module-jDAR6,
+  .form-module-xD1fv .form-module-wcAbi {
+    display: grid;
+    gap: var(--space-16);
+  }
+
+.form-segment-module-JLPcG {
+  --tooltip-size: 24px;
+  --info-icon-offset: calc((var(--tooltip-size) + var(--space-4)) * -1);
+  --form-segment-toggle-columns: var(--form-segment-no-columns);
+  --form-segment-columns: var(--form-segment-toggle-columns,);
+  --form-segment-no-columns: var(--form-segment-toggle-columns,);
+
+  display: grid;
+  gap: 0;
+  grid-template-rows: minmax(0, min-content);
+
+  /* TODO: for when we continue developing forms */
+}
+
+  /* set all field components and their internal FormFieldLayout to the subgrid 
+  [class*='text-field'],
+  [class*='number-field'],
+  [class*='select-field'],
+  [class*='checkbox-field'],
+  [class*='switch-field'],
+  [class*='form-field-layout'] {
+    display: grid;
+    grid-row: span 3;
+    grid-template-rows: subgrid;
+  } */
+
+  .form-segment-module-JLPcG.form-segment-module-98g3i {
+    justify-self: flex-start;
+  }
+
+  /* when info icon is present inside TODO: use class name partial value instead of data */
+
+  .form-segment-module-JLPcG:has([class*='info-icon-tooltip']) {
+    margin-inline-end: var(--info-icon-offset);
+
+    /* TODO: for when we continue developing forms */
+
+    /* space for 2 columns
+    @container (min-inline-size: 556px) {
+      &:not(:only-child) {
+        margin-inline-end: var(--form-segment-columns, 0);
+      }
+    }
+
+    @container (min-inline-size: 556px) and (max-inline-size: 841px) {
+      &:nth-child(2n) {
+        margin-inline-end: var(--form-segment-columns, var(--info-icon-offset));
+      }
+    }
+
+    space for 3 columns
+    @container (min-inline-size: 842px) and (max-inline-size: 1047px) {
+      &:nth-child(3n),
+      &:nth-child(2):last-child {
+        margin-inline-end: var(--form-segment-columns, var(--info-icon-offset));
+      }
+    }
+
+    space for 4 columns
+    @container (min-inline-size: 1048px) {
+      &:nth-child(4n),
+      &:nth-child(3):last-child,
+      &:nth-child(2):last-child {
+        margin-inline-end: var(--form-segment-columns, var(--info-icon-offset));
+      }
+    } */
+  }
+
+.form-segment-group-module-P3YjC {
+  display: grid;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  gap: var(--space-16);
+  grid-template-rows: repeat(3, min-content);
+
+  /* TODO: when we continue developing forms, then start doing columns */
+
+  /* > [class*='form-segment'] {
+    grid-row: span 3;
+    grid-template-rows: subgrid;
+  }
+
+  &.columns {
+    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
+
+    above 1314, where - with a minimum width of 250px and 16px gap - 5 columns would appear, we restrict it to max 4 columns
+    @container (min-inline-size: 1314px) {
+      --minimum-width: calc((100% - 3 * var(--space-16)) / 4);
+
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(var(--minimum-width), 1fr)
+      );
+    }
+
+    > [class*='form-segment'] {
+      --form-segment-toggle-columns: var(--form-segment-columns);
+    }
+  } */
+}
+
 .switch-module-ywpXc {
   --pin-color: var(--color-white);
   --box-color: var(--color-brand-light-gray);
@@ -4464,22 +4834,24 @@ button.swiper-pagination-bullet {
   --disabled-selected-box-color: var(--color-brand-dark-gray);
 
   display: flex;
-  align-items: center;
+  align-items: baseline;
   color: var(--color-brand-black);
   cursor: pointer;
   font-size: var(--font-size-14);
   forced-color-adjust: none;
-  gap: 6px;
 }
 
   .switch-module-ywpXc .switch-module-2e1rG {
     width: 44px;
     height: 24px;
     box-sizing: border-box;
+    flex-shrink: 0;
     border-radius: 12px;
     background: var(--box-color);
+    margin-block: -0.5em 0.5em;
     transition-duration: 200ms;
     transition-property: background;
+    translate: 0 0.5em;
   }
 
   .switch-module-ywpXc .switch-module-2e1rG::before {
@@ -4491,7 +4863,9 @@ button.swiper-pagination-bullet {
       border-radius: 50%;
       margin: var(--space-2);
       background: var(--pin-color);
-      box-shadow: 0 3px 1px 0 rgb(0 0 0 / 6%), 0 3px 8px 0 rgb(0 0 0 / 15%);
+      box-shadow:
+        0 3px 1px 0 rgb(0 0 0 / 6%),
+        0 3px 8px 0 rgb(0 0 0 / 15%);
       content: '';
       transition: all 200ms;
     }
@@ -4514,7 +4888,7 @@ button.swiper-pagination-bullet {
         opacity: 0.4;
       }
 
-  .switch-module-ywpXc.switch-module-rRUh4 .switch-module-2e1rG, .switch-module-ywpXc.switch-module-hSbOs .switch-module-2e1rG, .switch-module-ywpXc[data-focus-visible] .switch-module-2e1rG {
+  .switch-module-ywpXc[data-focus-visible] .switch-module-2e1rG {
       box-shadow: var(--shadow-focus-outline-padded);
       outline: 2px solid var(--color-brand-white);
       outline-offset: 0;
@@ -4536,14 +4910,36 @@ button.swiper-pagination-bullet {
       background: var(--disabled-selected-box-color);
     }
 
-.password-reveal-toggle-module-uUQbW {
+  .switch-module-ywpXc .switch-module-rZxF4:not(:empty) {
+    font-weight: unset;
+    margin-inline-start: var(--space-8);
+  }
+
+.switch-field-module-lBYuh {
+  justify-self: flex-start;
+}
+
+.password-reveal-toggle-module-bGH6I {
   display: inline-flex;
+  color: var(--color-brand-medium-gray);
   cursor: pointer;
 }
 
-  .password-reveal-toggle-module-uUQbW span {
-    height: var(--space-24);
+  .password-reveal-toggle-module-bGH6I[data-hovered],
+  .password-reveal-toggle-module-bGH6I[data-focused] {
+    color: var(--color-brand-dark-gray);
   }
+
+  .password-reveal-toggle-module-bGH6I input {
+    block-size: 0;
+    inline-size: 0;
+  }
+
+  .password-reveal-toggle-module-bGH6I span {
+    block-size: var(--space-24);
+    inline-size: var(--space-24);
+  }
+
 .textarea-module-C6Xr1 {
   position: relative;
   display: inline-block;
@@ -4600,38 +4996,8 @@ button.swiper-pagination-bullet {
       padding: 11px var(--space-8);
     }
 
-.text-field-module-JeaK0 {
-  all: unset;
-  display: grid;
-  grid-template-areas:
-    'label .'
-    'field info'
-    'error .';
-  grid-template-columns: 1fr auto;
-}
-
-  .text-field-module-JeaK0 span:empty {
-    display: none;
-  }
-
-.text-field-module-hFl0f {
-  grid-area: label;
-  margin-block-end: var(--space-4);
-}
-
-.text-field-module-nHYDe {
-  grid-area: field;
-}
-
-.text-field-module-kHn5y {
-  align-self: center;
-  grid-area: info;
-  margin-inline-start: var(--space-4);
-}
-
-.text-field-module-8XbgH {
-  grid-area: error;
-  margin-block-start: var(--space-4);
+.text-field-module-PBkCx {
+  /* styles */
 }
 
 .categories-grid-module-C751R {
@@ -4837,6 +5203,7 @@ button.swiper-pagination-bullet {
   --box-shadow: var(--box-shadow-medium);
 
   position: relative;
+  z-index: 0;
   overflow: hidden;
   width: 100%;
   height: 100%;
@@ -4849,6 +5216,13 @@ button.swiper-pagination-bullet {
     box-shadow ease 0.2s;
 }
 
+@media (hover: hover) {
+    .promo-card-module-e2oii:hover {
+      box-shadow: var(--box-shadow);
+      scale: 1.04;
+    }
+  }
+
 .promo-card-module-e2oii .promo-card-module-jr9sn img {
       -o-object-fit: cover;
          object-fit: cover;
@@ -4856,14 +5230,6 @@ button.swiper-pagination-bullet {
          object-position: bottom left;
     }
 
-@media (hover: hover) {
-    .promo-card-module-e2oii:hover {
-      box-shadow: var(--box-shadow);
-      color: var(--color-black);
-      scale: 1.04;
-    }
-}
-
 @container (min-width: 273px) {
   .promo-card-module-e2oii {
     --box-shadow: var(--box-shadow-heavy);
@@ -5594,67 +5960,17 @@ button.swiper-pagination-bullet {
          object-fit: contain;
     }
 
-.message-module-N1e1t {
-  --color: var(--color-brand-black);
+.add-to-favorite-dialog-module-WJYMb {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
 
-  display: grid;
-  align-items: center;
-  padding: var(--space-8);
-  background: color-mix(in hsl, var(--color), transparent 88%);
-  font-size: var(--font-size-base);
-  grid-template-areas: 'icon body';
-  grid-template-columns: minmax(0, min-content) 1fr;
-}
-
-.message-module-w2hsL {
-  color: var(--color);
-  grid-area: icon;
-  margin-block: -3px;
-  margin-inline-end: var(--space-8);
-}
-
-.message-module-w2hsL svg {
-    display: block;
-  }
-
-.message-module-Gi4uR {
-  grid-area: body;
-  text-wrap: pretty;
-}
-
-/* variants */
-
-.message-module-pp9U4 {
-  background: var(--color-brand-light-gray);
-}
-
-.message-module-srkp1 {
-  --color: var(--color-semantic-information);
-}
-
-.message-module-oeSdr {
-  --color: var(--color-semantic-stop);
-}
-
-.message-module-Vp0pA {
-  --color: var(--color-semantic-okay);
-}
-
-.message-module-kvANQ {
-  --color: var(--color-semantic-notify);
-}
-
-.add-to-favorite-dialog-module-WJYMb {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.add-to-favorite-dialog-module--0-Ln {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-  gap: 1rem;
+.add-to-favorite-dialog-module--0-Ln {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  gap: 1rem;
 }
 
 .add-to-favorite-dialog-module-ZAuzE {
@@ -5806,207 +6122,18 @@ button.swiper-pagination-bullet {
   transition: margin-top 300ms linear;
 }
 
-.sign-in-page-layout-module-Z1oE2 {
-  --layout-width: var(--page-container-max-layout-width, 100vw);
-  --padding-inline: var(--page-container-padding-inline, 10px);
-  --content-width-min: 270px;
-  --gutter-width: minmax(22px, 1fr);
-  --content-width: minmax(var(--content-width-min), 350px);
-  --main-padding-block: var(--space-24);
-  --side-width: auto; /* when shown at lg+, will adapt to 50%; above xl will grow from 4 of 8, until 7 of 12 */
-  --side-height: 100%;
-  --side-height-max: calc(100svb);
-  --side-breakout: min(
-    var(--breakout-minimum),
-    calc((100vw - var(--layout-width)) * -0.5)
-  );
-  --breakout-minimum: calc(var(--padding-inline) * -1);
-
-  display: grid;
-  align-items: center;
-  grid-template-areas: '. main .';
-  grid-template-columns:
-    var(--gutter-width)
-    var(--content-width)
-    var(--gutter-width);
-}
-
-  @media (width >= 768px) {.sign-in-page-layout-module-Z1oE2 {
-    --content-width: minmax(var(--content-width-min), 37.5%); /* 3 of 8 */
-    --gutter-width: 6.25%; /* 0.5 of 8 */
-    --main-padding-block: var(--space-48);
-
-    grid-template-areas: 'side . main .';
-    grid-template-columns:
-      var(--side-width)
-      var(--gutter-width)
-      var(--content-width)
-      var(--gutter-width)
-}
-  }
-
-  @media (width >= 1024px) {.sign-in-page-layout-module-Z1oE2 {
-    --gutter-width: 8.33%; /* 1 of 12 */
-    --content-width: minmax(350px, 25%) /* 350px to 3 of 12 */
-}
-  }
-
-  .sign-in-page-layout-module-Z1oE2.sign-in-page-layout-module-D5yqX {
-    min-block-size: 100%;
-  }
-
-.sign-in-page-layout-module-s6x7v {
-  grid-area: main;
-  padding-block: var(--main-padding-block);
-}
-
-.sign-in-page-layout-module-W-FMF {
-  position: sticky;
-  display: none;
-  overflow: hidden;
-  align-self: stretch;
-  block-size: var(--side-height);
-  grid-area: side;
-  inset-block-start: 0;
-
-  /* negative margin breaking out of the layout, stretching to the view port edge */
-  margin-inline-start: var(--side-breakout);
-  max-block-size: var(--side-height-max);
-}
-
-@media (width >= 768px) {
-
-.sign-in-page-layout-module-W-FMF {
-    display: block
-}
-  }
-
-.sign-in-page-layout-module-W-FMF .sign-in-page-layout-module-cbE8y {
-    position: absolute;
-    background: var(--color-brand-light-gray);
-    inset: 0 0 -1px;
-
-    /* mask, the brand 'hook' */
-    -webkit-mask: var(--mask-brand-hook);
-            mask: var(--mask-brand-hook);
-  }
-
-/* subtle drop shadow at the top (also masked) */
-
-.sign-in-page-layout-module-W-FMF .sign-in-page-layout-module-cbE8y::after {
-      position: absolute;
-      background: linear-gradient(
-        to bottom,
-        hsl(0deg 0% 0% / 20%),
-        hsl(0deg 0% 0% / 0%)
-      );
-      block-size: 40px;
-      content: '';
-      inset: 0 0 auto;
-    }
-
-.sign-in-page-layout-module-W-FMF .sign-in-page-layout-module-cbE8y img {
-      -o-object-position: right;
-         object-position: right;
-    }
-
-.sign-in-form-module-4DkkP {
+.create-account-form-module-TMU8F {
   min-inline-size: 270px;
 }
 
-/* generic utility styles that we could reuse */
-
-.sign-in-form-module-bGXUd {
-  --tooltip-size: 24px;
-  --info-icon-offset: calc((var(--tooltip-size) + var(--space-4)) * -1);
-
-  display: grid;
-  container-type: inline-size;
-  gap: var(--space-16);
-}
-
-.sign-in-form-module-bGXUd p {
-    margin: 0 0 var(--space-4);
-  }
-
-.sign-in-form-module-TumIz {
-  display: grid;
-}
-
-.sign-in-form-module-TumIz .sign-in-form-module-bIzyz {
-    justify-self: flex-start;
-  }
-
-.sign-in-form-module-EoTYu {
-  display: grid;
-  padding: 0;
-  border: 0;
-  margin: 0;
-  gap: var(--space-16);
+.sign-in-form-module-BoJwR {
+  min-inline-size: 270px;
 }
 
-.sign-in-form-module-EoTYu.sign-in-form-module-9eIx- {
-    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
-  }
-
-/* above 1314, where - with a minimum width of 250px and 16px gap - 5 columns would appear, we restrict it to max 4 columns */
-
-@container (min-inline-size: 1314px) {
-
-.sign-in-form-module-EoTYu.sign-in-form-module-9eIx- {
-      --minimum-width: calc((100% - 3 * var(--space-16)) / 4);
-
-      grid-template-columns: repeat(
-        auto-fit,
-        minmax(var(--minimum-width), 1fr)
-      )
-  }
-    }
-
-/* info icon rules: when (visually) the last segment on a row with an icon, needs to have a negative margin */
-
-.sign-in-form-module-EoTYu .sign-in-form-module-TumIz:has([data-info]) {
-    margin-inline-end: var(--info-icon-offset);
+  .sign-in-form-module-BoJwR .sign-in-form-module-PQ4Ik {
+    margin-block: 0 var(--space-4);
   }
 
-/* 2 * 250px + 16px = 516px; space for 2 columns */
-
-@container (min-inline-size: 516px) {
-      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):not(:only-child) {
-        margin-inline-end: 0;
-      }
-    }
-
-@container (min-inline-size: 516px) and (max-inline-size: 781px) {
-      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2n) {
-        margin-inline-end: var(--info-icon-offset);
-      }
-    }
-
-/* 3 * 250px + 2 * 16px = 782px; space for 3 columns */
-
-@container (min-inline-size: 782px) and (max-inline-size: 1047px) {
-      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(3n),
-      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2):last-child {
-        margin-inline-end: var(--info-icon-offset);
-      }
-    }
-
-/* 4 * 250px + 3 * 16px = 1048px; space for 4 columns */
-
-@container (min-inline-size: 1048px) {
-      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(4n),
-      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(3):last-child,
-      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2):last-child {
-        margin-inline-end: var(--info-icon-offset);
-      }
-    }
-
-.sign-in-form-module-aYBAy {
-  display: grid;
-  gap: var(--space-16);
-}
-
 .page-container-module-eFYSe {
   --page-container-padding-inline: 10px;
   --page-container-padding-block: 10px;
@@ -6108,6 +6235,110 @@ button.swiper-pagination-bullet {
       padding-block-end: 0;
     }
 
+.sign-in-page-layout-module-Z1oE2 {
+  --layout-width: var(--page-container-max-layout-width, 100vw);
+  --padding-inline: var(--page-container-padding-inline, 10px);
+  --content-width-min: 270px;
+  --gutter-width: minmax(22px, 1fr);
+  --content-width: minmax(var(--content-width-min), 350px);
+  --main-padding-block: var(--space-24);
+  --side-width: auto; /* when shown at lg+, will adapt to 50%; above xl will grow from 4 of 8, until 7 of 12 */
+  --side-height: 100%;
+  --side-height-max: calc(100svb);
+  --side-breakout: min(
+    var(--breakout-minimum),
+    calc((100vw - var(--layout-width)) * -0.5)
+  );
+  --breakout-minimum: calc(var(--padding-inline) * -1);
+
+  display: grid;
+  align-items: center;
+  grid-template-areas: '. main .';
+  grid-template-columns:
+    var(--gutter-width)
+    var(--content-width)
+    var(--gutter-width);
+}
+
+  @media (width >= 768px) {.sign-in-page-layout-module-Z1oE2 {
+    --content-width: minmax(var(--content-width-min), 37.5%); /* 3 of 8 */
+    --gutter-width: 6.25%; /* 0.5 of 8 */
+    --main-padding-block: var(--space-48);
+
+    grid-template-areas: 'side . main .';
+    grid-template-columns:
+      var(--side-width)
+      var(--gutter-width)
+      var(--content-width)
+      var(--gutter-width)
+}
+  }
+
+  @media (width >= 1024px) {.sign-in-page-layout-module-Z1oE2 {
+    --gutter-width: 8.33%; /* 1 of 12 */
+    --content-width: minmax(350px, 25%) /* 350px to 3 of 12 */
+}
+  }
+
+  .sign-in-page-layout-module-Z1oE2.sign-in-page-layout-module-D5yqX {
+    min-block-size: 100%;
+  }
+
+.sign-in-page-layout-module-s6x7v {
+  grid-area: main;
+  padding-block: var(--main-padding-block);
+}
+
+.sign-in-page-layout-module-W-FMF {
+  position: sticky;
+  display: none;
+  overflow: hidden;
+  align-self: stretch;
+  block-size: var(--side-height);
+  grid-area: side;
+  inset-block-start: 0;
+
+  /* negative margin breaking out of the layout, stretching to the view port edge */
+  margin-inline-start: var(--side-breakout);
+  max-block-size: var(--side-height-max);
+}
+
+@media (width >= 768px) {
+
+.sign-in-page-layout-module-W-FMF {
+    display: block
+}
+  }
+
+.sign-in-page-layout-module-W-FMF .sign-in-page-layout-module-cbE8y {
+    position: absolute;
+    background: var(--color-brand-light-gray);
+    inset: 0 0 -1px;
+
+    /* mask, the brand 'hook' */
+    -webkit-mask: var(--mask-brand-hook);
+            mask: var(--mask-brand-hook);
+  }
+
+/* subtle drop shadow at the top (also masked) */
+
+.sign-in-page-layout-module-W-FMF .sign-in-page-layout-module-cbE8y::after {
+      position: absolute;
+      background: linear-gradient(
+        to bottom,
+        hsl(0deg 0% 0% / 20%),
+        hsl(0deg 0% 0% / 0%)
+      );
+      block-size: 40px;
+      content: '';
+      inset: 0 0 auto;
+    }
+
+.sign-in-page-layout-module-W-FMF .sign-in-page-layout-module-cbE8y img {
+      -o-object-position: right;
+         object-position: right;
+    }
+
 .checkout-page-layout-module-lULV3 {
   --layout-width: var(--page-container-max-width, 100svw);
   --padding-inline: var(--page-container-padding-inline, 10px);