@sonic-equipment/ui 167.0.0 → 169.0.0

package/dist/styles.css

@@ -240,6 +240,8 @@
   --loading-layer: 12;
   --background-overlay-behind-header: 13;
   --header-layer: 15;
+  --background-overlay-behind-announcement: 16;
+  --announcements-layer: 18;
   --background-overlay-in-front: 90;
   --sidebar-layer: 100;
   --search-layer: 200;
@@ -248,7 +250,7 @@
 }
 :root {
   --search-input-height: 76px;
-  --announcement-bar-height: 52px;
+  --announcements-height: 0px;
   --header-height: 0px;
 }
 :root {
@@ -260,6 +262,14 @@
       100% no-repeat exclude,
     linear-gradient(0deg, #000, #000);
 }
+:root {
+  --transition-duration-short: 250ms;
+}
+html {
+  padding-right: 0 !important;
+  interpolate-size: allow-keywords;
+  scrollbar-gutter: stable;
+}
 
 .address-info-display-module-CbRth {
   font: inherit;
@@ -396,6 +406,7 @@
     }
 
   .accordion-module-9WvAH .accordion-module-lf9d- .accordion-module--Rwpb .accordion-module-Y50uq {
+        display: none;
         margin-left: auto;
       }
 
@@ -421,6 +432,16 @@
       cursor: pointer;
     }
 
+  .accordion-module-9WvAH .accordion-module-lf9d-.accordion-module-QEO2d .accordion-module--Rwpb .accordion-module-Y50uq {
+        display: block;
+      }
+
+  @media (hover: hover) {
+        .accordion-module-9WvAH .accordion-module-lf9d-.accordion-module-QEO2d .accordion-module--Rwpb:hover {
+          background-color: var(--accordion-item-hover-color);
+        }
+      }
+
   .accordion-module-9WvAH .accordion-module-lf9d- .accordion-module-KZjMo {
       display: grid;
       grid-template-rows: 0fr;
@@ -462,12 +483,6 @@
       border-color: var(--color-brand-light-gray);
     }
 
-  @media (hover: hover) {
-        .accordion-module-9WvAH .accordion-module-lf9d-.accordion-module-QEO2d .accordion-module--Rwpb:hover {
-          background-color: var(--accordion-item-hover-color);
-        }
-    }
-
   /*********************************************************
   *
   * Dropdown variant 
@@ -1694,7 +1709,7 @@
   inset: 0;
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity var(--transition-duration-short) ease-in-out;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -1705,6 +1720,13 @@
     pointer-events: all;
   }
 
+  @starting-style {
+
+  .background-overlay.visible {
+      opacity: 0
+  }
+    }
+
 .badge-module-X5Au9 {
   --shadow-color: 48 209 88;
   --animation-duration: 1000ms;
@@ -3003,7 +3025,12 @@
     grid-template-columns:
       143px var(--space-8)
       1fr auto
+
+    /* create a bit of extra space at the top for items with no tags but with a price that contains an original price */
 }
+    .orderline-card-module-AMTMm:not(:has(.orderline-card-module-gXavY)):has(.orderline-card-module-q3yjo [class*='original-price']) {
+      padding-block-start: 40px;
+    }
 
     .orderline-card-module-AMTMm .orderline-card-module-C8xE6 {
       align-self: baseline;
@@ -3138,14 +3165,14 @@
 .product-card-module-pLaiB .product-card-module-irW0D {
     grid-area: price;
     margin-block-end: var(--space-8);
-    place-self: flex-end flex-end;
+    place-self: flex-end;
   }
 
 .product-card-module-pLaiB .product-card-module-SnCvX {
     z-index: var(--z-top);
     cursor: default;
     grid-area: amount;
-    place-self: flex-end flex-start;
+    place-self: flex-end;
   }
 
 @container (min-width: 273px) {
@@ -4567,18 +4594,17 @@ button.swiper-pagination-bullet {
   }
 
 .drawer-module-5ARuA {
-  --transition-timing-function: ease-in-out;
-  --transition-duration: 0.3s;
-  --transform-translate-x-from: -100%;
-  --transform-translate-x-to: 0;
-  --transform-translate-y-from: 0;
-  --transform-translate-y-to: 0;
+  --timing-function: ease-in-out;
+  --duration: var(--transition-duration-short);
+  --translate-x-from: -100%;
+  --translate-x-to: 0;
+  --translate-y-from: 0;
+  --translate-y-to: 0;
 
   position: fixed;
   z-index: var(--sidebar-layer);
   display: flex;
   flex-direction: column;
-  border: 1px solid var(--color-gray-200);
   background-color: var(--color-white);
   pointer-events: all;
 }
@@ -4587,46 +4613,51 @@ button.swiper-pagination-bullet {
     top: 0;
     bottom: 0;
     left: 0;
-    min-width: 300px;
   }
 
   .drawer-module-5ARuA.drawer-module-bZLBV {
-    --transform-translate-x-from: 100%;
-    --transform-translate-x-to: 0;
-    --transform-translate-y-from: 0;
-    --transform-translate-y-to: 0;
+    --translate-x-from: 100%;
+    --translate-x-to: 0;
+    --translate-y-from: 0;
+    --translate-y-to: 0;
 
     top: 0;
     right: 0;
     bottom: 0;
-    min-width: 300px;
   }
 
   .drawer-module-5ARuA.drawer-module-KiviE {
-    --transform-translate-x-from: 0;
-    --transform-translate-x-to: 0;
-    --transform-translate-y-from: -100%;
-    --transform-translate-y-to: 0;
+    --translate-x-from: 0;
+    --translate-x-to: 0;
+    --translate-y-from: -100%;
+    --translate-y-to: 0;
 
     top: 0;
     right: 0;
     left: 0;
-    min-height: 300px;
   }
 
   .drawer-module-5ARuA.drawer-module-p-PYu {
-    right: 0;
-
-    --transform-translate-x-from: 0;
-    --transform-translate-x-to: 0;
-    --transform-translate-y-from: 100%;
-    --transform-translate-y-to: 0;
+    --translate-x-from: 0;
+    --translate-x-to: 0;
+    --translate-y-from: 100%;
+    --translate-y-to: 0;
 
+    right: 0;
     bottom: 0;
     left: 0;
-    min-height: 300px;
   }
 
+  .drawer-module-5ARuA.drawer-module-0ZHVw {
+    z-index: calc(var(--announcements-layer) + 1);
+  }
+
+  .drawer-module-5ARuA.drawer-module-0ZHVw.drawer-module-yjFdX,
+    .drawer-module-5ARuA.drawer-module-0ZHVw.drawer-module-bZLBV,
+    .drawer-module-5ARuA.drawer-module-0ZHVw.drawer-module-KiviE {
+      top: var(--announcements-bottom);
+    }
+
   .drawer-module-5ARuA.drawer-module-0jRBQ {
     z-index: calc(var(--header-layer) - 1);
   }
@@ -4634,41 +4665,28 @@ button.swiper-pagination-bullet {
   .drawer-module-5ARuA.drawer-module-0jRBQ.drawer-module-yjFdX,
     .drawer-module-5ARuA.drawer-module-0jRBQ.drawer-module-bZLBV,
     .drawer-module-5ARuA.drawer-module-0jRBQ.drawer-module-KiviE {
-      top: var(--header-height);
+      top: var(--header-bottom);
     }
 
   .drawer-module-5ARuA.enter {
-    transform: translate(
-      var(--transform-translate-x-from),
-      var(--transform-translate-y-from)
-    );
+    transform: translate(var(--translate-x-from), var(--translate-y-from));
   }
 
   .drawer-module-5ARuA.enter-active {
-    transform: translate(
-      var(--transform-translate-x-to),
-      var(--transform-translate-y-to)
-    );
+    transform: translate(var(--translate-x-to), var(--translate-y-to));
   }
 
   .drawer-module-5ARuA.exit {
-    transform: translate(
-      var(--transform-translate-x-to),
-      var(--transform-translate-y-to)
-    );
+    transform: translate(var(--translate-x-to), var(--translate-y-to));
   }
 
   .drawer-module-5ARuA.exit-active {
-    transform: translate(
-      var(--transform-translate-x-from),
-      var(--transform-translate-y-from)
-    );
+    transform: translate(var(--translate-x-from), var(--translate-y-from));
   }
 
   .drawer-module-5ARuA.exit-active,
   .drawer-module-5ARuA.enter-active {
-    transition: transform var(--transition-duration)
-      var(--transition-timing-function);
+    transition: transform var(--duration) var(--timing-function);
   }
 
 .footer-module-YzJ68 {
@@ -5502,13 +5520,9 @@ button.swiper-pagination-bullet {
 }
 
 .search-result-panel-module-KBrc9 {
-  position: absolute;
-  z-index: var(--sidebar-layer);
-  top: 100%;
-  left: 0;
   overflow: auto;
   width: 100%;
-  height: calc(100dvh - var(--header-height) - var(--search-input-height));
+  height: calc(100dvh - var(--header-bottom) - var(--search-input-height));
   box-sizing: border-box;
   background-color: var(--color-white);
   box-shadow: var(--box-shadow-heavy);
@@ -5533,8 +5547,7 @@ button.swiper-pagination-bullet {
   }
 
 .global-search-module-d2g2F {
-  position: relative;
-  z-index: -1;
+  background-color: var(--color-white);
   font-family: var(--font-family-sonic);
 }
 
@@ -5543,11 +5556,6 @@ button.swiper-pagination-bullet {
 }
 
 .global-search-module-Sx8Lx .global-search-module--orCF {
-    position: absolute;
-    z-index: var(--search-layer);
-    top: 0;
-    right: 0;
-    left: 0;
     box-sizing: border-box;
     transition: transform 0.3s ease-in-out;
   }
@@ -5575,266 +5583,76 @@ button.swiper-pagination-bullet {
       transform: translateY(-100%);
     }
 
-.hamburger-button-module-xER52 {
-  --width: 24px;
-  --padding-inline: 2px;
-  --transition-duration: 200ms;
-
-  position: relative;
-  display: block;
-  width: var(--width);
-  border: none;
-  aspect-ratio: 1;
-  background: none;
-  cursor: pointer;
-}
-
-  .hamburger-button-module-xER52 span {
-    position: absolute;
-    left: 1px;
-    display: block;
-    width: calc(var(--width) - 2 * var(--padding-inline));
-    height: 8%;
-    background-color: var(--color-black);
-    transition-duration: var(--transition-duration);
-    transition-property: transform, top;
-    transition-timing-function: ease;
-  }
-
-  .hamburger-button-module-xER52 span:nth-child(1) {
-      top: calc(var(--width) / 6 - 1px);
-      transition-delay: 0s, var(--transition-duration);
-    }
-
-  .hamburger-button-module-xER52 span:nth-child(2) {
-      top: calc(var(--width) / 2 - 1px);
-      opacity: 1;
-      transition-delay: var(--transition-duration);
-      transition-property: opacity;
-    }
-
-  .hamburger-button-module-xER52 span:nth-child(3) {
-      top: calc(var(--width) / 6 * 5 - 1px);
-      transition-delay: 0s, var(--transition-duration);
-    }
-
-  .hamburger-button-module-xER52:where(.hamburger-button-module-7yoVH) span:nth-child(1) {
-        top: calc(var(--width) / 2 - 1px);
-        transform: rotate(45deg);
-        transition-delay: var(--transition-duration), 0s;
-      }
-
-  .hamburger-button-module-xER52:where(.hamburger-button-module-7yoVH) span:nth-child(2) {
-        opacity: 0;
-        transition-delay: var(--transition-duration);
-        transition-property: opacity;
-      }
-
-  .hamburger-button-module-xER52:where(.hamburger-button-module-7yoVH) span:nth-child(3) {
-        top: calc(var(--width) / 2 - 1px);
-        transform: rotate(-45deg);
-        transition-delay: var(--transition-duration), 0s;
-      }
-
-.header-layout-module-VlTuk {
-  display: grid;
-  align-items: center;
-  background-color: var(--color-white);
-  gap: var(--space-8);
-  grid-template-columns: auto 1fr auto;
-  padding-block: var(--space-4);
-  padding-inline: var(--space-16);
+.hamburger-button-module-W6FPI {
+  --size: 24px;
+  --duration: var(--transition-duration-short);
+  --timing-function: ease-in-out;
 }
 
-  .header-layout-module-VlTuk,
-  .header-layout-module-VlTuk * {
+  .hamburger-button-module-W6FPI .hamburger-button-module-2h4ML {
+    position: relative;
+    display: grid;
     box-sizing: border-box;
-  }
-
-  .header-layout-module-VlTuk .header-layout-module-oKPyL {
-    inline-size: min(var(--space-100), 100%);
-    justify-self: center;
-  }
-
-  .header-layout-module-VlTuk .header-layout-module-aBOJL {
-    display: flex;
-  }
-
-  .header-layout-module-VlTuk .header-layout-module--ICLK {
-    display: none;
-    justify-items: center;
-  }
-
-  .header-layout-module-VlTuk .header-layout-module-HjY-a {
-    display: flex;
-  }
-
-  .header-layout-module-VlTuk .header-layout-module-HjY-a .header-layout-module-fP3a6 {
-      display: none;
-    }
-
-  .header-layout-module-VlTuk .header-layout-module-HjY-a .header-layout-module-4Qp5b {
-      display: flex;
-    }
-
-  @media (width >= 1024px) {.header-layout-module-VlTuk {
-    padding-block: var(--space-12);
-    padding-inline: var(--space-32)
-}
-
-    .header-layout-module-VlTuk .header-layout-module-oKPyL {
-      inline-size: var(--space-100);
-    }
-
-    .header-layout-module-VlTuk .header-layout-module-aBOJL {
-      display: none;
-    }
-
-    .header-layout-module-VlTuk .header-layout-module--ICLK {
-      display: block;
-    }
-      .header-layout-module-VlTuk .header-layout-module-HjY-a .header-layout-module-fP3a6 {
-        display: block;
-      }
-  }
-
-.navigation-link-list-module-Ku9Sa {
-  --max-width: 200px;
-
-  display: flex;
-  padding: 0;
-  margin: 0;
-  gap: var(--space-40);
-  list-style: none;
-}
-
-  .navigation-link-list-module-Ku9Sa .navigation-link-list-module-kj0Rj {
-    display: flex;
-    align-items: baseline;
-    padding: 0;
-    border: none;
-    background: none;
-    color: var(--color-black);
+    aspect-ratio: 1;
     cursor: pointer;
-    font-family: inherit;
-    font-size: var(--font-size-18);
-    font-weight: var(--font-weight-bold);
-    max-inline-size: var(--max-width);
-    text-decoration: none;
-  }
-
-  .navigation-link-list-module-Ku9Sa .navigation-link-list-module-kj0Rj:hover {
-      color: var(--color-brand-red);
-    }
-
-  .navigation-link-list-module-Ku9Sa .navigation-link-list-module-kj0Rj .navigation-link-list-module-QiKiA {
-      flex-shrink: 0;
-      margin-inline-start: var(--space-4);
-    }
-
-.sonic-logo-module-5zzhF {
-  display: block;
-}
-
-  .sonic-logo-module-5zzhF,
-  .sonic-logo-module-5zzhF * {
-    box-sizing: border-box;
-  }
-
-  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq {
-    display: block;
-    width: auto;
-    height: auto;
+    grid-template: repeat(3, 1fr) / 1fr;
+    inline-size: var(--size);
+    padding-inline: 1px;
+    place-items: center stretch;
   }
 
-  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq .sonic-logo-module-Pa7pF {
-      fill: var(--color-black);
-    }
-
-  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq .sonic-logo-module-vTCO3 {
-      fill: var(--color-brand-red);
-    }
-
-.center-module-Cr7hx {
-  display: grid;
-  width: 100%;
-  height: 100%;
-  min-height: inherit;
-  align-items: center;
-  place-content: center center;
-}
-
-.feature-list-module-cxc8U {
-  display: grid;
-  grid-template-columns: auto minmax(50%, 1fr);
-}
-
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r {
-    display: contents;
+  .hamburger-button-module-W6FPI span {
+    background-color: currentcolor;
+    block-size: 2px;
+    transition:
+      translate var(--duration) var(--duration) var(--timing-function),
+      rotate var(--duration) var(--timing-function),
+      visibility var(--duration) var(--duration) var(--timing-function);
   }
 
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r:nth-child(odd) * {
-      background-color: var(--color-brand-light-gray);
-    }
-
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-Tw0KD {
-      color: var(--color-brand-dark-gray);
-      line-height: 24px;
-      padding-block: 12px;
-      padding-inline: 14px;
-    }
-
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-Tw0KD:empty {
-        padding: 0;
+  .hamburger-button-module-W6FPI:where(.hamburger-button-module-UXSUP) span:nth-child(1) {
+        rotate: 45deg;
+        transition:
+          translate var(--duration) var(--timing-function),
+          rotate var(--duration) var(--duration) var(--timing-function);
+        translate: 0 calc(var(--size) / 3);
       }
 
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-J6Xfj {
-      font-weight: bold;
-    }
+  @starting-style {
 
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-J6Xfj.feature-list-module-deI1- {
-        text-align: right;
+  .hamburger-button-module-W6FPI:where(.hamburger-button-module-UXSUP) span:nth-child(1) {
+          rotate: 0deg;
+          translate: 0 0
       }
+        }
 
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-CqSj1 {
-      display: flex;
-      flex-direction: column;
-    }
-
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-CqSj1.feature-list-module-deI1- {
-        align-items: flex-end;
-        text-align: right;
+  .hamburger-button-module-W6FPI:where(.hamburger-button-module-UXSUP) span:nth-child(2) {
+        transition: visibility var(--duration) var(--timing-function);
+        visibility: hidden;
       }
 
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-CqSj1 svg.feature-list-module-ojZvf {
-          color: var(--color-status-available);
-        }
+  @starting-style {
 
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-CqSj1 svg.feature-list-module-4IjrA {
-          color: var(--color-status-unavailable);
+  .hamburger-button-module-W6FPI:where(.hamburger-button-module-UXSUP) span:nth-child(2) {
+          visibility: visible
+      }
         }
 
-.download-document-list-module-Z023h {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  color: var(--color-brand-black);
-  gap: 5px;
-}
-
-  .download-document-list-module-Z023h a {
-    color: var(--color-brand-dark-gray);
-    text-decoration: none;
-  }
+  .hamburger-button-module-W6FPI:where(.hamburger-button-module-UXSUP) span:nth-child(3) {
+        rotate: -45deg;
+        transition:
+          translate var(--duration) var(--timing-function),
+          rotate var(--duration) var(--duration) var(--timing-function);
+        translate: 0 calc(var(--size) / -3);
+      }
 
-  .download-document-list-module-Z023h a:hover {
-      color: var(--color-brand-red);
-    }
+  @starting-style {
 
-  .download-document-list-module-Z023h svg {
-    width: 20px;
-    height: 20px;
-  }
+  .hamburger-button-module-W6FPI:where(.hamburger-button-module-UXSUP) span:nth-child(3) {
+          rotate: 0deg;
+          translate: 0 0
+      }
+        }
 
 .menu-list-module-TloB9 {
   --ml-font-size: var(--font-size-16);
@@ -5853,6 +5671,9 @@ button.swiper-pagination-bullet {
   grid-template-areas:
     'back-button'
     'scroll-area';
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
   /* TODO: scroll area row should stretch to avail height, but also enforce the scroll-area to scroll if overflowing */
@@ -6155,15 +5976,452 @@ button.swiper-pagination-bullet {
         background: var(--mli-button-hover-bgcolor);
       }
 
-.orderline-list-module-v-FqO {
-  container-type: inline-size;
+.panel-navigation-module-FnSua {
+  block-size: inherit;
 }
 
-  .orderline-list-module-v-FqO .orderline-list-module-JTZK3 {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: var(--space-12);
+.panel-navigation-module-torfG {
+  position: relative;
+  display: grid;
+  block-size: inherit;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.panel-navigation-module-torfG.panel-navigation-module-7K80h {
+    overflow: hidden;
+    grid-template-columns: 1fr;
+  }
+
+.panel-navigation-module-j3ZBu {
+  --transition-duration: 250ms;
+
+  z-index: 2;
+  display: grid;
+  background-color: var(--color-white);
+  block-size: inherit;
+  border-inline: 1px solid var(--color-brand-light-gray);
+  margin-inline-start: -1px;
+}
+
+/* only applies to the first panel, when more content than one menu is present, like in the mobile navigation */
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-1yGRP {
+    display: flex;
+    overflow: hidden auto;
+    flex-direction: column;
+    gap: var(--space-24);
+    scrollbar-width: thin;
+  }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-1yGRP > * {
+      flex-shrink: 0;
+    }
+
+.panel-navigation-module-j3ZBu:last-child {
+    z-index: 1;
+  }
+
+.panel-navigation-module-j3ZBu.exit-active,
+  .panel-navigation-module-j3ZBu.enter-active {
+    transition: translate var(--transition-duration) ease-in-out;
+  }
+
+.panel-navigation-module-j3ZBu.exit-active,
+  .panel-navigation-module-j3ZBu.enter {
+    translate: -100% 0;
+  }
+
+.panel-navigation-module-j3ZBu.enter-active {
+    translate: 0 0;
+  }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h {
+    position: absolute;
+    border: 0;
+    margin: 0;
+    inset: 0;
+  }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.exit-active,
+    .panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.enter {
+      translate: 100% 0;
+    }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.enter-active {
+      translate: 0 0;
+    }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h:has(+ .panel-navigation-module-j3ZBu.panel-navigation-module-7K80h) {
+      transition: translate var(--transition-duration) ease-in-out;
+      translate: -100% 0;
+    }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h:has(+ .panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.exit-active) {
+      translate: 0 0;
+    }
+
+.desktop-navigation-drawer-module-rXWPO {
+  --drawer-bottom-margin: var(--header-height);
+
+  /* TODO: wish I could get this to height auto with a max height */
+  block-size: min(
+    100%,
+    calc(100svh - var(--header-bottom) - var(--drawer-bottom-margin))
+  );
+}
+
+.sonic-logo-module-5zzhF {
+  display: block;
+}
+
+  .sonic-logo-module-5zzhF,
+  .sonic-logo-module-5zzhF * {
+    box-sizing: border-box;
+  }
+
+  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq {
+    display: block;
+    width: auto;
+    height: auto;
+  }
+
+  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq .sonic-logo-module-Pa7pF {
+      fill: var(--color-black);
+    }
+
+  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq .sonic-logo-module-vTCO3 {
+      fill: var(--color-brand-red);
+    }
+
+.mobile-navigation-module-rMdS- {
+  --height: 56px;
+  --gutter: var(--space-12);
+  --logo-size: 100px;
+  --button-size: var(--space-32);
+  --duration: var(--transition-duration-short);
+  --timing-function: ease-in-out;
+
+  display: grid;
+  overflow: hidden;
+  block-size: 100%;
+  grid-template:
+    var(--height) 1fr /
+    var(--gutter) var(--button-size) 1fr var(--button-size)
+    var(--gutter);
+  grid-template-areas:
+    '. hamburger logo . .'
+    'p p p p p';
+}
+
+  @media (width >= 576px) {.mobile-navigation-module-rMdS- {
+    --gutter: var(--space-4);
+    --button-size: var(--space-48)
+}
+  }
+
+  .mobile-navigation-module-rMdS- .mobile-navigation-module-XKb3- {
+    z-index: 2;
+    display: grid;
+    align-items: center;
+    border-block-end: 1px solid var(--color-brand-light-gray);
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    margin-block-end: -1px;
+    transition: translate var(--duration) var(--timing-function);
+    translate: 100% 0;
+  }
+
+  .mobile-navigation-module-rMdS-.mobile-navigation-module-P0kLz .mobile-navigation-module-XKb3- {
+    translate: 0 0;
+  }
+
+  @starting-style {
+
+  .mobile-navigation-module-rMdS-.mobile-navigation-module-P0kLz .mobile-navigation-module-XKb3- {
+      translate: 100% 0
+  }
+    }
+
+  .mobile-navigation-module-rMdS- .mobile-navigation-module-keQoj {
+    grid-area: logo;
+    inline-size: var(--logo-size);
+    justify-self: center;
+  }
+
+  @media (width > 414px) {
+
+  .mobile-navigation-module-rMdS- .mobile-navigation-module-keQoj {
+      display: none
+  }
+    }
+
+  .mobile-navigation-module-rMdS- .mobile-navigation-module-3Z-Sl {
+    display: grid;
+    grid-area: hamburger;
+  }
+
+  .mobile-navigation-module-rMdS- .mobile-navigation-module-3Z-Sl > * {
+      min-inline-size: 0;
+    }
+
+  .mobile-navigation-module-rMdS- .mobile-navigation-module-zDR9Q {
+    z-index: 1;
+    grid-area: p;
+  }
+
+.mobile-navigation-drawer-module-XR23R {
+  inline-size: 100svw;
+  max-inline-size: 414px;
+}
+
+:root {
+  --header-bottom: calc(var(--announcements-height) + var(--header-height));
+}
+
+.header-layout-module-uGT3X {
+  --height: 56px;
+  --gutter: var(--space-12);
+  --logo-size: 100px;
+  --button-size: var(--space-32);
+  --transition-duration: var(--transition-duration-short);
+
+  position: relative;
+  z-index: var(--header-layer);
+  display: grid;
+  align-items: center;
+  background-color: var(--color-white);
+  border-block-end: 1px solid transparent;
+  grid-template:
+    var(--height) /
+    var(--gutter) var(--button-size) var(--button-size) var(--button-size)
+    1fr auto var(--gutter);
+  grid-template-areas: '. hamburger search . logo actions .';
+  transition: border-block-end-color 0s var(--transition-duration);
+}
+
+.header-layout-module-uGT3X,
+  .header-layout-module-uGT3X * {
+    box-sizing: border-box;
+  }
+
+.header-layout-module-uGT3X .header-layout-module-oKPyL {
+    grid-area: logo;
+    inline-size: var(--logo-size);
+    justify-self: center;
+  }
+
+.header-layout-module-uGT3X .header-layout-module-biHA2 {
+    display: grid;
+    grid-area: hamburger;
+  }
+
+.header-layout-module-uGT3X .header-layout-module-biHA2 > * {
+      min-inline-size: 0;
+    }
+
+.header-layout-module-uGT3X .header-layout-module-fP3a6 {
+    display: grid;
+    grid-area: search;
+    transition: opacity var(--transition-duration);
+  }
+
+.header-layout-module-uGT3X .header-layout-module-fP3a6 > * {
+      min-inline-size: 0;
+    }
+
+.header-layout-module-uGT3X .header-layout-module-vVRTn {
+    display: none;
+    grid-area: navigation;
+    justify-self: center;
+  }
+
+.header-layout-module-uGT3X .header-layout-module-Ux7Uj {
+    display: grid;
+    grid-area: actions;
+    grid-template-columns: repeat(3, var(--button-size));
+    grid-template-rows: 1fr;
+    transition: opacity var(--transition-duration);
+  }
+
+.header-layout-module-uGT3X .header-layout-module-Ux7Uj > * {
+      min-inline-size: 0;
+    }
+
+@media (width >= 576px) {
+
+.header-layout-module-uGT3X {
+    --gutter: var(--space-4);
+    --button-size: var(--space-48)
+}
+  }
+
+@media (width >= 1024px) {
+
+.header-layout-module-uGT3X {
+    --height: 96px;
+    --gutter: var(--space-32);
+
+    grid-template-areas: '. logo navigation search actions .';
+    grid-template-columns: var(--gutter) auto 1fr var(--button-size) auto var(
+        --gutter
+      )
+}
+
+    .header-layout-module-uGT3X.header-layout-module-1qdd6 {
+      border-block-end-color: var(--color-brand-light-gray);
+      transition: border-block-end-color 0s;
+    }
+
+    .header-layout-module-uGT3X .header-layout-module-biHA2 {
+      display: none;
+    }
+
+    .header-layout-module-uGT3X .header-layout-module-vVRTn {
+      display: block;
+    }
+  }
+
+.navigation-link-list-module-Ku9Sa {
+  --max-width: 200px;
+
+  display: flex;
+  padding: 0;
+  margin: 0;
+  gap: var(--space-40);
+  list-style: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+  .navigation-link-list-module-Ku9Sa .navigation-link-list-module-kj0Rj {
+    display: flex;
+    align-items: baseline;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--color-black);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--font-size-18);
+    font-weight: var(--font-weight-bold);
+    max-inline-size: var(--max-width);
+    text-decoration: none;
+  }
+
+  .navigation-link-list-module-Ku9Sa .navigation-link-list-module-kj0Rj:hover {
+      color: var(--color-brand-red);
+    }
+
+  .navigation-link-list-module-Ku9Sa .navigation-link-list-module-kj0Rj .navigation-link-list-module-QiKiA {
+      flex-shrink: 0;
+      margin-inline-start: var(--space-4);
+    }
+
+  .navigation-link-list-module-Ku9Sa .navigation-link-list-module-jDgf0 .navigation-link-list-module-kj0Rj {
+    color: var(--color-brand-red);
+  }
+
+.header-module--VpOI {
+  position: relative;
+  z-index: var(--header-layer);
+}
+
+  .header-module--VpOI.header-module-Zh4pu {
+    position: sticky;
+    top: var(--announcements-bottom);
+  }
+
+.center-module-Cr7hx {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+  align-items: center;
+  place-content: center center;
+}
+
+.feature-list-module-cxc8U {
+  display: grid;
+  grid-template-columns: auto minmax(50%, 1fr);
+}
+
+  .feature-list-module-cxc8U .feature-list-module-tTJ2r {
+    display: contents;
+  }
+
+  .feature-list-module-cxc8U .feature-list-module-tTJ2r:nth-child(odd) * {
+      background-color: var(--color-brand-light-gray);
+    }
+
+  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-Tw0KD {
+      color: var(--color-brand-dark-gray);
+      line-height: 24px;
+      padding-block: 12px;
+      padding-inline: 14px;
+    }
+
+  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-Tw0KD:empty {
+        padding: 0;
+      }
+
+  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-J6Xfj {
+      font-weight: bold;
+    }
+
+  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-J6Xfj.feature-list-module-deI1- {
+        text-align: right;
+      }
+
+  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-CqSj1 {
+      display: flex;
+      flex-direction: column;
+    }
+
+  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-CqSj1.feature-list-module-deI1- {
+        align-items: flex-end;
+        text-align: right;
+      }
+
+  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-CqSj1 svg.feature-list-module-ojZvf {
+          color: var(--color-status-available);
+        }
+
+  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-CqSj1 svg.feature-list-module-4IjrA {
+          color: var(--color-status-unavailable);
+        }
+
+.download-document-list-module-Z023h {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--color-brand-black);
+  gap: 5px;
+}
+
+  .download-document-list-module-Z023h a {
+    color: var(--color-brand-dark-gray);
+    text-decoration: none;
+  }
+
+  .download-document-list-module-Z023h a:hover {
+      color: var(--color-brand-red);
+    }
+
+  .download-document-list-module-Z023h svg {
+    width: 20px;
+    height: 20px;
+  }
+
+.orderline-list-module-v-FqO {
+  container-type: inline-size;
+}
+
+  .orderline-list-module-v-FqO .orderline-list-module-JTZK3 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: var(--space-12);
     margin-bottom: var(--space-12);
   }
 
@@ -6178,20 +6436,25 @@ button.swiper-pagination-bullet {
 
   .orderline-list-module-v-FqO .orderline-list-module-5COK6 {
     display: grid;
+    padding: 0;
+    margin: 0;
+    list-style: none;
   }
 
   .orderline-list-module-v-FqO .orderline-list-module-5COK6 .orderline-list-module-2p-Jd {
-      border-bottom: 1px solid #00000019;
+      padding: 0;
+      border-bottom: 1px solid var(--color-brand-light-gray);
+      margin: 0;
     }
 
   .orderline-list-module-v-FqO .orderline-list-module-5COK6 .orderline-list-module-2p-Jd:first-child {
-        border-top: 1px solid #00000019;
+        border-top: 1px solid var(--color-brand-light-gray);
       }
 
 .blank-page-spacer-module-lXxle {
   display: grid;
   width: 100%;
-  height: calc(100dvh - var(--header-height));
+  height: calc(100dvh - var(--header-bottom));
   background-color: var(--color-white);
   place-items: center;
 }
@@ -6419,95 +6682,13 @@ button.swiper-pagination-bullet {
   gap: 1rem;
 }
 
-.panel-navigation-module-FnSua {
-  block-size: inherit;
-}
-
-.panel-navigation-module-torfG {
-  position: relative;
-  display: grid;
-  block-size: inherit;
-  grid-template-columns: repeat(4, 1fr);
-}
-
-.panel-navigation-module-torfG.panel-navigation-module-7K80h {
-    overflow: hidden;
-    grid-template-columns: 1fr;
-  }
-
-.panel-navigation-module-j3ZBu {
-  --transition-duration: 250ms;
-
-  z-index: 2;
-  display: grid;
-  background-color: var(--color-white);
-  block-size: inherit;
-  border-inline: 1px solid var(--color-brand-light-gray);
-  margin-inline-start: -1px;
-}
-
-/* only applies to the first panel, when more content than one menu is present, like in the mobile navigation */
-
-.panel-navigation-module-j3ZBu.panel-navigation-module-1yGRP {
-    display: flex;
-    overflow: hidden auto;
-    flex-direction: column;
-    gap: var(--space-24);
-    scrollbar-width: thin;
-  }
-
-.panel-navigation-module-j3ZBu.panel-navigation-module-1yGRP > * {
-      flex-shrink: 0;
-    }
-
-.panel-navigation-module-j3ZBu:last-child {
-    z-index: 1;
-  }
-
-.panel-navigation-module-j3ZBu.exit-active,
-  .panel-navigation-module-j3ZBu.enter-active {
-    transition: translate var(--transition-duration) ease-in-out;
-  }
-
-.panel-navigation-module-j3ZBu.exit-active,
-  .panel-navigation-module-j3ZBu.enter {
-    translate: -100% 0;
-  }
-
-.panel-navigation-module-j3ZBu.enter-active {
-    translate: 0 0;
-  }
-
-.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h {
-    position: absolute;
-    border: 0;
-    margin: 0;
-    inset: 0;
-  }
-
-.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.exit-active,
-    .panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.enter {
-      translate: 100% 0;
-    }
-
-.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.enter-active {
-      translate: 0 0;
-    }
-
-.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h:has(+ .panel-navigation-module-j3ZBu.panel-navigation-module-7K80h) {
-      transition: translate var(--transition-duration) ease-in-out;
-      translate: -100% 0;
-    }
-
-.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h:has(+ .panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.exit-active) {
-      translate: 0 0;
-    }
-
 .announcement-module-Xi0L5 {
-  --text-color: var(--color-white);
-  --background-color: var(--color-brand-red);
+  --z: 1;
   --icon-color: currentcolor;
-  --border-color: var(--color-brand-red);
+  --close-button-size: var(--space-48);
+  --background-color: var(--color-white);
+  --text-color: var(--color-brand-dark-gray);
+  --border-color: var(--color-brand-light-gray);
 }
 
   .announcement-module-Xi0L5,
@@ -6518,65 +6699,106 @@ button.swiper-pagination-bullet {
   .announcement-module-Xi0L5 {
 
   position: relative;
+  z-index: var(--z);
   display: flex;
-  min-height: var(--announcement-bar-height);
-  padding: 13px 16px;
-  border: 1px solid var(--border-color);
+  overflow: hidden;
+  align-items: flex-end;
+  justify-content: stretch;
   background-color: var(--background-color);
+  border-block: 1px solid var(--border-color);
   color: var(--text-color);
+  font-family: var(--font-family-sonic);
+  font-size: var(--font-size-base);
+  font-style: italic;
+  line-height: 1;
 }
 
   .announcement-module-Xi0L5 .announcement-module-4XVjD {
-    display: flex;
+    display: grid;
     align-items: center;
-    padding-right: 56px;
-    gap: 8px;
+    grid-template: 'icon content close';
+    grid-template-columns: var(--close-button-size) 1fr var(--close-button-size);
+    grid-template-rows: minmax(var(--close-button-size), min-content);
+    inline-size: 100%;
+  }
+
+  @media (width >= 576px) {
+
+  .announcement-module-Xi0L5 .announcement-module-4XVjD {
+      grid-template: '. . icon . content . close';
+      grid-template-columns:
+        var(--close-button-size) 1fr var(--space-24) var(--space-8)
+        minmax(0, max-content) 1fr var(--close-button-size)
   }
+    }
+
+  .announcement-module-Xi0L5 .announcement-module-4XVjD svg {
+      display: block;
+    }
 
   .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-lxmA2 {
       color: var(--icon-color);
+      grid-area: icon;
+      justify-self: center;
     }
 
-  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-lxmA2 svg {
-        display: block;
-      }
+  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y {
+      padding: var(--space-8) 0;
+      grid-area: content;
+    }
+
+  @media (width >= 576px) {
 
   .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y {
-      display: flex;
-      flex-direction: column;
-      font-family: var(--font-family-sonic);
-      font-size: var(--font-size-base);
-      font-style: italic;
+        display: flex;
+        flex-flow: row wrap
     }
+      }
 
   .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module-8k2rK {
+        flex-shrink: 1;
         margin: 0;
         font-size: var(--font-size-base);
         font-weight: var(--font-weight-black);
         text-transform: uppercase;
       }
 
+  @media (width >= 576px) {
+
+  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module-8k2rK:has(+ .announcement-module--Bhqj, + .announcement-module-yXGsN)::after {
+          content: '-';
+          font-weight: var(--font-weight-normal);
+          margin-inline: var(--space-4)
+      }
+        }
+
   .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module-yXGsN {
-        flex-wrap: nowrap;
+        flex-shrink: 1;
         margin: 0;
+      }
+
+  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module--Bhqj {
+        position: static;
+        flex-shrink: 1;
         color: currentcolor;
-        gap: 0;
       }
 
-  .announcement-module-Xi0L5 .announcement-module-gZ9ae {
-    position: absolute;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-  }
+  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module--Bhqj:hover {
+          text-decoration: underline;
+        }
 
-  .announcement-module-Xi0L5:where(.announcement-module-0LTWL),
-  .announcement-module-Xi0L5:where(.announcement-module-Ga3lN),
-  .announcement-module-Xi0L5:where(.announcement-module-S3nSW) {
-    --background-color: var(--color-white);
-    --text-color: var(--color-brand-dark-gray);
-    --border-color: var(--color-brand-light-gray);
-  }
+  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module--Bhqj::after {
+          position: absolute;
+          background: transparent;
+          content: '';
+          inset: 0;
+        }
+
+  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-gZ9ae {
+      z-index: 1;
+      grid-area: close;
+      justify-self: center;
+    }
 
   .announcement-module-Xi0L5:where(.announcement-module-0LTWL) {
     --icon-color: var(--color-semantic-information);
@@ -6590,58 +6812,56 @@ button.swiper-pagination-bullet {
     --icon-color: var(--color-semantic-stop);
   }
 
-  /* stylelint-disable-next-line no-descending-specificity */
-
-  .announcement-module-Xi0L5.announcement-module-Fj5ya:hover .announcement-module-yXGsN {
-      text-decoration: underline;
-    }
-
-  .announcement-module-Xi0L5.announcement-module-Fj5ya:hover:where(.announcement-module-E6DqW) {
-      border-color: var(--color-brand-dark-red);
-      background-color: var(--color-brand-dark-red);
-    }
-
-@media (width >= 576px) {
-  .announcement-module-Xi0L5 {
-    justify-content: center;
+  .announcement-module-Xi0L5:where(.announcement-module-E6DqW) {
+    --z: 2;
+    --background-color: var(--color-brand-red);
+    --text-color: var(--color-white);
+    --icon-color: var(--color-white);
+    --border-color: var(--color-white);
   }
 
-    .announcement-module-Xi0L5 .announcement-module-4XVjD {
-      padding-right: 0;
+  .announcement-module-Xi0L5:where(.announcement-module-E6DqW):has([href]):hover {
+      --background-color: var(--color-brand-dark-red);
     }
 
-      .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y {
-        flex-direction: row;
-      }
-          .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module-8k2rK::after {
-            content: '-';
-            margin-inline: 4px;
-          }
+:root {
+  --announcements-bottom: var(--announcements-height);
 }
 
-.announcement-provider-module-sVIKY {
+.announcement-list-module-Nn6HC {
   position: relative;
-  z-index: calc(var(--header-layer) + 1);
+  z-index: var(--announcements-layer);
 }
 
-.announcement-provider-module-ksjgO {
-  margin-top: calc(-1 * var(--announcement-bar-height));
-}
+.announcement-list-module-Nn6HC.announcement-list-module-icXq8 {
+    position: sticky;
+    top: 0;
+  }
 
-.announcement-provider-module-k0zd- {
-  margin-top: 0;
-  transition: margin-top 300ms linear;
-}
+.announcement-list-module-Nn6HC .announcement-list-module-cgFNU {
+    display: flex;
+    flex-direction: column;
+  }
 
-.announcement-provider-module-w2N0B {
-  z-index: -1;
-  margin-top: 0;
-}
+.announcement-list-module-Nn6HC .announcement-list-module-fUupi {
+    margin-block: -1px;
+  }
 
-.announcement-provider-module-4lfx2 {
-  margin-top: calc(-1 * var(--announcement-bar-height));
-  transition: margin-top 300ms linear;
-}
+.announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-W10mi,
+    .announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-tyqE0 {
+      transition: all var(--transition-duration-short) linear;
+    }
+
+.announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-W10mi,
+    .announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-tyqE0.announcement-list-module-dUOEB {
+      z-index: -1;
+      height: 0;
+    }
+
+.announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-W10mi.announcement-list-module-1Rfn0,
+    .announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-tyqE0 {
+      height: auto;
+    }
 
 .create-account-form-module-TMU8F {
   min-inline-size: 270px;
@@ -6894,7 +7114,7 @@ button.swiper-pagination-bullet {
   .checkout-page-layout-module-lULV3 .checkout-page-layout-module-wGAXb {
     position: fixed;
     z-index: var(--top-actions-sticky-layer);
-    top: var(--header-height);
+    top: var(--header-bottom);
     right: 0;
     left: 0;
     width: 100%;
@@ -7133,7 +7353,7 @@ button.swiper-pagination-bullet {
 
   .product-details-page-layout-module-pPtZX .product-details-page-layout-module-KCKLZ .product-details-page-layout-module-3-19O {
       position: sticky;
-      top: calc(var(--header-height) + var(--space-8));
+      top: calc(var(--header-bottom) + var(--space-8));
       height: -moz-fit-content;
       height: fit-content;
     }
@@ -8321,7 +8541,7 @@ button.swiper-pagination-bullet {
   }
 }
 .toast-provider-module-EoPKW {
-  top: calc(var(--header-height) + var(--space-12));
+  top: calc(var(--header-bottom) + var(--space-12));
   right: auto;
   left: auto;
   display: flex;
@@ -8332,7 +8552,7 @@ button.swiper-pagination-bullet {
 }
 
   @media (width >= 1024px) {.toast-provider-module-EoPKW {
-    top: calc(var(--header-height) + var(--space-12));
+    top: calc(var(--header-bottom) + var(--space-12));
     right: var(--toastify-toast-right);
     width: -moz-fit-content;
     width: fit-content;