@sonic-equipment/ui 148.0.0 → 150.0.0

package/dist/styles.css

@@ -4,6 +4,7 @@
 
   /* font sizes */
   --font-size-8: 0.5rem;
+  --font-size-10: 0.625rem;
   --font-size-11: 0.6875rem;
   --font-size-12: 0.75rem;
   --font-size-14: 0.875rem;
@@ -1810,7 +1811,6 @@
   color: var(--color-brand-black);
   font-weight: var(--font-weight-normal);
   text-wrap: pretty;
-  transition: all 0.2s ease-out;
 }
 
   .heading-module-pMC65:where(.heading-module-6spgX) {
@@ -2570,96 +2570,265 @@
   }
 }
 
+.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;
-  margin-top: var(--space-8);
-  margin-bottom: 0;
   color: var(--color-status-available);
   gap: var(--space-4);
   grid-column: span 2;
   line-height: 1.5;
 }
 
-.product-price-module-oIU1K {
-  --current-price-color: var(--color-brand-black);
-  --original-price-font-size: var(--font-size-18);
-  --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));
+  .delivery-time-module-fEWEl p {
+    margin: 0;
+  }
 
-  display: flex;
-  flex-direction: column;
-  line-height: 1;
+/* @property --price-larger {
+  initial-value: false;
+  syntax: '<boolean>';
 }
 
-  .product-price-module-oIU1K .product-price-module-til0s {
-    padding-left: var(--space-4);
-    color: var(--color-brand-dark-gray);
-    font-size: var(--original-price-font-size);
-    font-weight: var(--font-weight-bold);
-    text-decoration: line-through;
+@property --price-baseline {
+  initial-value: false;
+  syntax: '<boolean>';
+} */
+
+/* Singular prices */
+
+.price-module-Qyyas {
+  display: inline-grid;
+  color: var(--color, inherit);
+  dominant-baseline: middle;
+  font-family: var(--font-family, inherit);
+  font-size: var(--font-size, 1em);
+  font-style: var(--font-style, inherit);
+  font-weight: var(--font-weight, inherit);
+  grid-template-areas: 'symbol number';
+  line-height: var(--line-height, inherit);
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+
+.price-module-Qyyas > * {
+    display: inline-block;
+    -webkit-text-decoration: var(--text-decoration);
+            text-decoration: var(--text-decoration);
   }
 
-  .product-price-module-oIU1K .product-price-module-til0s.product-price-module-V1NCf {
-      opacity: 0;
-    }
+.price-module-Qyyas .price-module--Oil0 {
+    font-size: var(--font-size-symbol);
+    font-weight: var(--font-weight-symbol);
+    grid-area: symbol;
+    justify-self: flex-end;
+    margin-block-start: var(--margin-block-symbol);
+    margin-inline-end: var(--margin-inline-symbol);
+  }
 
-  .product-price-module-oIU1K .product-price-module-FfVhl {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    margin-top: calc(var(--space-4) * -1);
-    gap: 0 var(--space-4);
+.price-module-Qyyas .price-module-QnS4t {
+    display: inline-flex;
+    grid-area: number;
   }
 
-  .product-price-module-oIU1K .product-price-module-pvy2w {
-    position: relative;
-    display: flex;
-    color: var(--current-price-color);
-    font-size: var(--font-size-wholes);
-    font-style: var(--current-price-font-style);
-    font-weight: var(--font-weight-black);
+.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);
   }
 
-  .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: inherit;
-      font-weight: inherit;
+.price-module-Qyyas.price-module-vUbWV {
+    --color: var(--color-brand-black);
+    --font-family: var(--font-family-sonic);
+    --font-size: var(--base-font-size, var(--font-size-32));
+    --font-size-fraction: calc(var(--font-size) * 0.667);
+    --font-size-symbol: calc(var(--font-size) * 0.667);
+    --font-weight: var(--font-weight-black);
+    --font-weight-symbol: var(--font-weight-medium);
+    --line-height: 1;
+    --margin-block-fraction: 0.05em;
+    --margin-block-symbol: 0.1em;
+    --margin-inline-fraction: -0.35em;
+    --margin-inline-symbol: 0.05em;
+  }
+
+.price-module-Qyyas.price-module-vUbWV .price-module-9HAVF {
+      inline-size: 0;
     }
 
-  .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-eWOOF {
-      position: relative;
-      margin-top: 2px;
-      margin-left: -0.375rem;
-      font-size: var(--font-size-decimals);
-      font-weight: inherit;
+.price-module-Qyyas.price-module-vUbWV.price-module-bpZpP {
+      --color: var(--color-brand-red);
+      --font-style: italic;
+      --margin-inline-fraction: -0.25em;
     }
 
-  .product-price-module-oIU1K .product-price-module-syhum,
-  .product-price-module-oIU1K .product-price-module-96DoG {
-    color: var(--color-brand-dark-gray);
-    font-size: var(--font-size-12);
-    font-weight: var(--font-weight-normal);
-  }
+.price-module-Qyyas.price-module-vUbWV.price-module-TEd4d {
+      --font-size: calc(var(--base-font-size) * 0.5);
+      --font-size-fraction: var(--font-size);
+      --margin-block-fraction: unset;
+      --margin-inline-fraction: unset;
+      --margin-inline-symbol: 0.25em;
+    }
+
+.price-module-Qyyas.price-module-vUbWV .price-module--Oil0 {
+      text-decoration: none;
+    }
 
-  .product-price-module-oIU1K:has(.product-price-module-til0s:not(.product-price-module-V1NCf)) {
-    --current-price-color: var(--color-brand-red);
-    --current-price-font-style: italic;
+.price-module-Qyyas.price-module-fydQn {
+    --color: var(--color-brand-dark-gray);
+    --text-decoration: line-through;
   }
 
-.product-total-price-module-w3CRH {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  margin-top: calc(var(--space-4) * -1);
-  gap: 0 var(--space-4);
+/* Price composite component */
+
+.price-module-tbuNk {
+  /* https://kizu.dev/cyclic-toggles/#limitations */
+
+  /*
+    For a larger variant, apply this custom property and value to a Price instance
+    --price-toggle-size: var(--price-size-larger);
+  */
+  --price-toggle-size: var(--price-size-normal);
+  --price-size-normal: var(--price-toggle-size,);
+  --price-size-larger: var(--price-toggle-size,);
+
+  /*
+    For a baseline shifted variant, apply this custom property and value to a Price instance
+    --price-toggle-baseline: var(--price-baseline-shifted);
+  */
+  --price-toggle-baseline: var(--price-baseline-default);
+  --price-baseline-default: var(--price-toggle-baseline,);
+  --price-baseline-shifted: var(--price-toggle-baseline,);
+
+  display: inline-flex;
+  gap: 0.2em;
+  inline-size: -moz-max-content;
+  inline-size: max-content;
+  vertical-align: baseline;
 }
 
-  .product-total-price-module-w3CRH .product-total-price-module-MKCnH {
-    margin-bottom: 2px;
+.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));
+    --font-size-old: calc(var(--base-font-size) * 0.5);
+    --font-size-ppu: var(--font-size-10);
+    --font-size-vat: var(--font-size-10);
+    --color-ppu: var(--color-brand-dark-gray);
+    --color-vat: var(--color-brand-dark-gray);
+    --vertical-offset: var(
+      --price-baseline-shifted,
+      calc(var(--base-font-size) * -0.2 - 1px)
+    );
+
+    display: inline-grid;
+    gap: 0;
+    grid-template-columns: minmax(0, min-content) 1fr;
+    grid-template-rows: repeat(auto-fill, minmax(0, min-content));
+    justify-items: flex-end;
+    line-height: 1;
+    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;
+      grid-template-columns: subgrid;
+      inset-inline-start: 0.2em;
+      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;
+      }
+
 .product-sku-module-ITb8x {
   all: unset;
   color: var(--color-brand-dark-gray);
@@ -2670,12 +2839,26 @@
   all: unset;
   position: relative;
   display: grid;
-  width: 100%;
   padding: var(--space-16);
   background-color: var(--color-white);
   cursor: pointer;
-  gap: var(--space-16);
-  grid-template-columns: 1fr;
+  gap: 0 var(--space-16);
+  grid-template:
+    143px var(--space-12) repeat(3, minmax(0, min-content)) minmax(
+      var(--space-8),
+      1fr
+    )
+    repeat(2, minmax(0, min-content)) / 1fr auto;
+  grid-template-areas:
+    'image image'
+    '. .'
+    'tags tags'
+    'title title'
+    'sku sku'
+    '. .'
+    'amount price'
+    'info info';
+  inline-size: 100%;
   transition: scale 0.2s ease;
 }
 
@@ -2686,239 +2869,272 @@
 
   .orderline-card-module-AMTMm.orderline-card-module-NU77X {
     cursor: default;
-    pointer-events: none;
   }
 
-  .orderline-card-module-AMTMm .orderline-card-module-TlhUg {
-    width: 143px;
-    height: 143px;
-    margin: auto;
+  .orderline-card-module-AMTMm .orderline-card-module-0CunP {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
   }
 
-  .orderline-card-module-AMTMm .orderline-card-module-L0kX1 {
-    display: grid;
-    align-items: center;
-    -moz-column-gap: var(--space-16);
-         column-gap: var(--space-16);
-    grid-template-columns: 1fr auto;
+  .orderline-card-module-AMTMm .orderline-card-module-C8xE6 {
+    grid-area: title;
+    margin-block-end: var(--space-8);
   }
 
-  .orderline-card-module-AMTMm .orderline-card-module-L0kX1 .orderline-card-module-D-6JE {
-      grid-column: span 2;
-    }
+  .orderline-card-module-AMTMm .orderline-card-module-gXavY {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-4);
+    grid-area: tags;
+    margin-block-end: var(--space-8);
+  }
 
-  .orderline-card-module-AMTMm .orderline-card-module-L0kX1 .orderline-card-module-D-6JE .orderline-card-module-uiHOY {
-        margin-bottom: 10px;
-      }
+  .orderline-card-module-AMTMm .orderline-card-module-Zcir0 {
+    grid-area: sku;
+    margin-block: 0 var(--space-8);
+  }
 
-  .orderline-card-module-AMTMm .orderline-card-module-L0kX1 .orderline-card-module-D-6JE .orderline-card-module-C8xE6 {
-        margin-bottom: 8px;
-      }
+  .orderline-card-module-AMTMm .orderline-card-module-TlhUg {
+    aspect-ratio: 1;
+    grid-area: image;
+    justify-self: center;
+    max-block-size: 100%;
+    max-inline-size: 100%;
+  }
 
-  .orderline-card-module-AMTMm .orderline-card-module-L0kX1 .orderline-card-module-s-u3O {
-      margin-top: var(--space-8);
-      margin-bottom: 0;
-    }
+  .orderline-card-module-AMTMm .orderline-card-module-ZjAaX {
+    align-self: center;
+    grid-area: amount;
+  }
 
-  .orderline-card-module-AMTMm .orderline-card-module-L0kX1 .orderline-card-module-ZjAaX {
-      margin-top: var(--space-16);
-    }
+  .orderline-card-module-AMTMm .orderline-card-module-q3yjo {
+    align-self: center;
+    grid-area: price;
+  }
 
-  .orderline-card-module-AMTMm .orderline-card-module-L0kX1 .orderline-card-module-q3yjo {
-      --font-size-wholes: var(--font-size-32);
-      --font-size-decimals: var(--font-size-20);
-      --original-price-font-size: var(--font-size-16);
-    }
+  .orderline-card-module-AMTMm .orderline-card-module-s-u3O {
+    align-self: baseline;
+    font-size: var(--font-size-14);
+    grid-area: amount;
+  }
 
-  .orderline-card-module-AMTMm .orderline-card-module-L0kX1 .orderline-card-module-N-Oe- {
-      grid-column: span 2;
+  .orderline-card-module-AMTMm:has(.orderline-card-module-s-u3O) .orderline-card-module-q3yjo {
+      --price-toggle-baseline: var(--price-baseline-shifted);
+
+      align-self: baseline;
     }
 
-  .orderline-card-module-AMTMm .orderline-card-module-0CunP {
-    position: absolute;
-    top: 0;
-    right: 0;
+  .orderline-card-module-AMTMm .orderline-card-module-N-Oe- {
+    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(
+        2,
+        minmax(0, min-content)
+      )
+      / 143px 1fr auto;
+    grid-template-areas:
+      'image tags tags'
+      'image title title'
+      'image sku sku'
+      'image . .'
+      'image amount price'
+      'image info info'
+}
   }
 
-  @container (width >= 576px) {.orderline-card-module-AMTMm {
-    padding: 40px 60px 32px 0;
-    gap: var(--space-40);
-    grid-template-columns: auto 1fr
+  @container (inline-size >= 700px) {.orderline-card-module-AMTMm {
+    grid-template-areas:
+      'image . tags .'
+      'image . title price'
+      'image . sku price'
+      'image . . price'
+      'image . amount price'
+      'image . info price';
+    grid-template-columns:
+      143px var(--space-8)
+      1fr auto
 }
 
-    .orderline-card-module-AMTMm .orderline-card-module-L0kX1 {
-      align-content: center;
-      align-items: flex-start;
+    .orderline-card-module-AMTMm .orderline-card-module-C8xE6 {
+      align-self: baseline;
     }
 
-      .orderline-card-module-AMTMm .orderline-card-module-L0kX1 .orderline-card-module-D-6JE {
-        grid-column: span 1;
-      }
-
-      .orderline-card-module-AMTMm .orderline-card-module-L0kX1 .orderline-card-module-s-u3O,
-      .orderline-card-module-AMTMm .orderline-card-module-L0kX1 .orderline-card-module-ZjAaX {
-        order: 1;
-      }
+    .orderline-card-module-AMTMm .orderline-card-module-q3yjo {
+      --price-toggle-baseline: var(--price-baseline-shifted);
 
-      .orderline-card-module-AMTMm .orderline-card-module-L0kX1 .orderline-card-module-N-Oe- {
-        order: 1;
-      }
+      align-self: baseline;
+    }
   }
 
 .product-card-module-LepTy {
   container-type: inline-size;
+  inline-size: 100%;
 }
 
 .product-card-module-pLaiB {
   --title-font-size: var(--font-size-16);
   --box-shadow: var(--box-shadow-medium);
-  --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: grid;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  padding-top: var(--space-12);
+  padding: var(--space-12);
   background-color: var(--color-white);
+  block-size: 100%;
   color: var(--color-black);
   cursor: pointer;
-  grid-template-rows: auto 1fr;
-  outline: none;
+  gap: 0 var(--space-8);
+  grid-template:
+    122px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
+      var(--space-8),
+      1fr
+    )
+    repeat(2, minmax(0, min-content))
+    / 1fr;
+  grid-template-areas:
+    'image'
+    '.'
+    'tags'
+    'title'
+    'sku'
+    '.'
+    'price'
+    'amount';
+  inline-size: 100%;
   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 {
-    display: grid;
-    height: 100%;
+.product-card-module-pLaiB,
+  .product-card-module-pLaiB * {
     box-sizing: border-box;
-    padding-bottom: var(--padding-bottom);
-    margin-top: auto;
-    gap: var(--space-16);
-    padding-inline: var(--padding-inline);
   }
 
-.product-card-module-pLaiB .product-card-module-Q0VvF {
-    height: 112px;
+.product-card-module-pLaiB .product-card-module-tvEdz {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
   }
 
-.product-card-module-pLaiB .product-card-module-Q0VvF .product-card-module-HkWBE {
-      display: flex;
-      min-height: var(--tag-height, var(--space-16));
-      margin-bottom: 18px;
-      gap: 3px;
-    }
+.product-card-module-pLaiB .product-card-module-CStNi {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    font-size: var(--title-font-size);
+    grid-area: title;
+    -webkit-line-clamp: 4;
+    line-height: 1;
+    margin-block-end: var(--space-8);
+    overflow-wrap: break-word;
+    text-wrap: balance;
+  }
 
-.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);
-      font-weight: var(--font-weight-bold);
-      -webkit-line-clamp: 4;
-      line-height: 1;
-      overflow-wrap: break-word;
-      text-wrap: balance;
+.product-card-module-pLaiB .product-card-module-CStNi mark {
+      background-color: rgb(109 170 200 / 40%);
+      color: currentcolor;
     }
 
-.product-card-module-pLaiB .product-card-module-Q0VvF .product-card-module-CStNi mark {
-        background-color: rgb(109 170 200 / 40%);
-        color: currentcolor;
-        font-weight: inherit;
-      }
-
-.product-card-module-pLaiB .product-card-module-kD2tU {
+.product-card-module-pLaiB .product-card-module-nL-hY {
     display: flex;
-    height: 102px;
     flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: auto;
+    gap: var(--space-4);
+    grid-area: tags;
+    margin-block-end: var(--space-8);
   }
 
-.product-card-module-pLaiB .product-card-module-p-zoi {
-    width: var(--image-width);
-    aspect-ratio: 1 / 1;
-    margin-inline: auto;
-    transition: width ease 0.2s;
+.product-card-module-pLaiB .product-card-module-XzunM {
+    grid-area: sku;
   }
 
-.product-card-module-pLaiB .product-card-module-p-zoi img {
-      display: block;
-      max-width: 100%;
-      height: 100%;
-    }
+.product-card-module-pLaiB .product-card-module-65ZVi {
+    aspect-ratio: 1;
+    grid-area: image;
+    justify-self: center;
+    max-block-size: 100%;
+    max-inline-size: 100%;
+  }
 
 .product-card-module-pLaiB .product-card-module-irW0D {
-    width: 100%;
+    overflow: hidden;
+    grid-area: price;
+    margin-block-end: var(--space-8);
+    place-self: flex-end flex-end;
   }
 
 .product-card-module-pLaiB .product-card-module-SnCvX {
-    display: flex;
-    width: 125px;
-    justify-content: flex-end;
-    margin-top: auto;
-    margin-left: auto;
+    grid-area: amount;
+    place-self: flex-end flex-end;
   }
 
 @media (hover: hover) {
     .product-card-module-pLaiB:hover {
       box-shadow: var(--box-shadow);
-      color: var(--color-black);
       scale: 1.04;
     }
-}
+  }
 
 @container (min-width: 273px) {
-  .product-card-module-pLaiB {
+
+.product-card-module-pLaiB {
     --box-shadow: var(--box-shadow-heavy);
-    --image-width: 204px;
-    --padding-bottom: var(--space-24);
-  }
 
-    .product-card-module-pLaiB .product-card-module-Q0VvF {
-      height: 142px;
-    }
+    grid-template:
+      204px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
+        var(--space-16),
+        1fr
+      )
+      minmax(0, min-content)
+      / 1fr auto;
+    grid-template-areas:
+      'image image'
+      '. .'
+      'tags tags'
+      'title title'
+      'sku sku'
+      '. .'
+      'price amount'
+}
 
-    .product-card-module-pLaiB .product-card-module-SnCvX {
-      margin-top: 0;
-      margin-left: auto;
+    .product-card-module-pLaiB .product-card-module-irW0D {
+      margin-block: 0;
+      place-self: flex-end flex-start;
     }
+  }
 
-    .product-card-module-pLaiB .product-card-module-kD2tU {
-      height: auto;
-      flex-wrap: nowrap;
+@container (min-width: 360px) {
+
+.product-card-module-pLaiB {
+    --title-font-size: var(--font-size-20);
+
+    padding: var(--space-16);
+    grid-template-rows:
+      288px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
+        var(--space-24),
+        1fr
+      )
+      minmax(0, min-content)
+}
+
+    .product-card-module-pLaiB .product-card-module-tvEdz {
+      inset-block-start: var(--space-4);
+      inset-inline-end: var(--space-4);
     }
 
     .product-card-module-pLaiB .product-card-module-irW0D {
-      width: initial;
+      --price-toggle-size: var(--price-size-larger);
     }
-}
 
-@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);
+    .product-card-module-pLaiB .product-card-module-nL-hY {
+      margin-block-end: var(--space-16);
+    }
   }
-}
 
 .product-overview-grid-module-bzys- {
   --amount-of-columns: 1;
@@ -2927,9 +3143,9 @@
 
   position: relative;
   display: grid;
-  width: 100%;
   gap: var(--row-gap) var(--column-gap);
   grid-template-columns: repeat(var(--amount-of-columns), 1fr);
+  inline-size: 100%;
 }
 
   .product-overview-grid-module-bzys- .product-overview-grid-module-XikkF {
@@ -2949,8 +3165,8 @@
 
   .product-overview-grid-module-bzys- .product-overview-grid-module-XikkF .product-overview-grid-module-DWnnI {
       position: fixed;
-      top: 50vh;
       animation: product-overview-grid-module-r-wvY 1.2s linear forwards;
+      inset-block-start: 50vh;
     }
 
 @keyframes product-overview-grid-module-r-wvY {
@@ -2983,15 +3199,12 @@
 
 .product-overview-grid-module-MlUVA {
   position: relative;
-  min-height: 380px;
+  display: grid;
+  min-block-size: 380px;
 }
 
 .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),
@@ -3000,7 +3213,11 @@
       #e0dfdf 90%,
       var(--color-white)
     );
+    block-size: 1px;
     content: '';
+    inline-size: 100%;
+    inset-block-start: calc(100% + var(--row-gap) / 2);
+    inset-inline-start: 0;
   }
 
 .product-overview-grid-module-MlUVA:has(> :hover) {
@@ -3009,7 +3226,7 @@
 
 @media (width >= 360px) {
   .product-overview-grid-module-MlUVA {
-    min-height: 448px;
+    min-block-size: 448px;
   }
 }
 
@@ -3021,7 +3238,7 @@
   }
 
   .product-overview-grid-module-MlUVA {
-    min-height: 448px;
+    min-block-size: 448px;
   }
 
     .product-overview-grid-module-MlUVA::before {
@@ -3030,10 +3247,6 @@
 
     .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),
@@ -3042,7 +3255,11 @@
         #e0dfdf 90%,
         var(--color-white)
       );
+      block-size: 100%;
       content: '';
+      inline-size: 1px;
+      inset-block-start: 0;
+      inset-inline-start: calc(100% + var(--column-gap) / 2);
     }
       .product-overview-grid-module-MlUVA:nth-child(2n)::after {
         display: none;
@@ -3375,7 +3592,7 @@
 .carousel-module-ealh- {
   position: relative;
   display: block;
-  width: 100%;
+  inline-size: 100%;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -3405,39 +3622,40 @@
       .carousel-module-ealh- .carousel-module-IftbN.carousel-module-tPg7k::after {
         position: absolute;
         z-index: calc(var(--carousel-layer) - 1);
-        top: -20%;
-        width: calc((100vw - 100%) / 2);
-        height: 140%;
         background: var(--color-brand-white);
+        block-size: 140%;
         content: '';
+        inline-size: calc((100vw - 100%) / 2);
+        inset-block-start: -20%;
         opacity: 1;
         transition: opacity 0.2s ease;
       }
 
   .carousel-module-ealh- .carousel-module-IftbN.carousel-module-tPg7k::before {
-        left: calc(-1 * ((100vw - 100%) / 2));
         background: linear-gradient(
           -90deg,
           rgb(255 255 255 / 20%) 0,
           rgb(255 255 255 / 95%) 80px,
           rgb(255 255 255 / 100%) 100px
         );
+        inset-inline-start: calc(-1 * ((100vw - 100%) / 2));
       }
 
   .carousel-module-ealh- .carousel-module-IftbN.carousel-module-tPg7k::after {
-        right: calc(-1 * ((100vw - 100%) / 2));
         background: linear-gradient(
           90deg,
           rgb(255 255 255 / 20%) 0,
           rgb(255 255 255 / 95%) 80px,
           rgb(255 255 255 / 100%) 100px
         );
+        inset-inline-end: calc(-1 * ((100vw - 100%) / 2));
       }
 
   .carousel-module-ealh- .carousel-module-bUMlb {
-    width: -moz-fit-content;
-    width: fit-content;
-    height: auto;
+    display: grid;
+    block-size: auto;
+    inline-size: -moz-fit-content;
+    inline-size: fit-content;
   }
 
   /* stylelint-disable-next-line no-descending-specificity */
@@ -3462,21 +3680,21 @@
     }
 
   .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-kcqEE.carousel-module-984Rr {
-        left: 0;
+        inset-inline-start: 0;
         transform: translate(-50%, 0);
       }
 
   .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-kcqEE.carousel-module-T7bTr {
-        right: 0;
+        inset-inline-end: 0;
         transform: translate(50%, 0);
       }
 
   .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-nL-O8 .carousel-module-kcqEE {
-        top: var(--space-24);
+        inset-block-start: var(--space-24);
       }
 
   .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-5SGYn .carousel-module-kcqEE {
-        top: 50%;
+        inset-block-start: 50%;
       }
 
   .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-5SGYn .carousel-module-kcqEE.carousel-module-984Rr {
@@ -3489,8 +3707,8 @@
 
   @media (width < 1024px) {
     .carousel-module-ealh-:has(.carousel-module-tPg7k) {
-      width: calc(100% + 20px);
-      margin-left: -10px;
+      inline-size: calc(100% + 20px);
+      margin-inline-start: -10px;
     }
 
     .carousel-module-ealh- .carousel-module-kcqEE {
@@ -3523,7 +3741,7 @@
 
 .card-carousel-module-DxKOG {
   --slide-width-normal: 300px;
-  --slide-width-narrow: 154px;
+  --slide-width-narrow: 172px;
   --slide-width-auto: auto;
   --slide-width: var(--slide-width-narrow);
 
@@ -4321,39 +4539,6 @@ button.swiper-pagination-bullet {
   .password-reveal-toggle-module-uUQbW span {
     height: var(--space-24);
   }
-.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[data-active] .info-icon-tooltip-module-0lY-K {
-    color: var(--color-trigger-active);
-  }
-
 .textarea-module-C6Xr1 {
   position: relative;
   display: inline-block;
@@ -6256,6 +6441,10 @@ button.swiper-pagination-bullet {
     justify-content: space-between;
   }
 
+  .product-details-panel-module-MXfPm .product-details-panel-module-wHZCr .product-details-panel-module-dI2JL {
+      --price-toggle-size: var(--price-size-larger);
+    }
+
   .product-details-panel-module-MXfPm .product-details-panel-module-wHZCr .product-details-panel-module-QLafW {
       display: flex;
       align-items: center;