@sonic-equipment/ui 167.0.0 → 168.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,10 +5520,6 @@ 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));
@@ -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,267 +5583,258 @@ 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-W6FPI {
+  --size: 24px;
+  --duration: var(--transition-duration-short);
+  --timing-function: ease-in-out;
 }
 
-  .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-W6FPI .hamburger-button-module-2h4ML {
+    position: relative;
+    display: grid;
+    box-sizing: border-box;
+    aspect-ratio: 1;
+    cursor: pointer;
+    grid-template: repeat(3, 1fr) / 1fr;
+    inline-size: var(--size);
+    padding-inline: 1px;
+    place-items: center stretch;
   }
 
-  .hamburger-button-module-xER52 span:nth-child(1) {
-      top: calc(var(--width) / 6 - 1px);
-      transition-delay: 0s, var(--transition-duration);
-    }
+  .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);
+  }
 
-  .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-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);
+      }
 
-  .hamburger-button-module-xER52 span:nth-child(3) {
-      top: calc(var(--width) / 6 * 5 - 1px);
-      transition-delay: 0s, var(--transition-duration);
-    }
+  @starting-style {
 
-  .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-W6FPI:where(.hamburger-button-module-UXSUP) span:nth-child(1) {
+          rotate: 0deg;
+          translate: 0 0
       }
+        }
 
-  .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-W6FPI:where(.hamburger-button-module-UXSUP) span:nth-child(2) {
+        transition: visibility var(--duration) var(--timing-function);
+        visibility: hidden;
       }
 
-  .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;
+  @starting-style {
+
+  .hamburger-button-module-W6FPI:where(.hamburger-button-module-UXSUP) span:nth-child(2) {
+          visibility: visible
       }
+        }
 
-.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: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);
+      }
+
+  @starting-style {
+
+  .hamburger-button-module-W6FPI:where(.hamburger-button-module-UXSUP) span:nth-child(3) {
+          rotate: 0deg;
+          translate: 0 0
+      }
+        }
+
+.announcement-module-Xi0L5 {
+  --z: 1;
+  --icon-color: currentcolor;
+  --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);
 }
 
-  .header-layout-module-VlTuk,
-  .header-layout-module-VlTuk * {
+  .announcement-module-Xi0L5,
+  .announcement-module-Xi0L5 * {
     box-sizing: border-box;
   }
 
-  .header-layout-module-VlTuk .header-layout-module-oKPyL {
-    inline-size: min(var(--space-100), 100%);
-    justify-self: center;
-  }
+  .announcement-module-Xi0L5 {
 
-  .header-layout-module-VlTuk .header-layout-module-aBOJL {
-    display: flex;
-  }
+  position: relative;
+  z-index: var(--z);
+  display: flex;
+  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;
+}
 
-  .header-layout-module-VlTuk .header-layout-module--ICLK {
-    display: none;
-    justify-items: center;
+  .announcement-module-Xi0L5 .announcement-module-4XVjD {
+    display: grid;
+    align-items: center;
+    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%;
   }
 
-  .header-layout-module-VlTuk .header-layout-module-HjY-a {
-    display: flex;
-  }
+  @media (width >= 576px) {
 
-  .header-layout-module-VlTuk .header-layout-module-HjY-a .header-layout-module-fP3a6 {
-      display: none;
+  .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)
+  }
     }
 
-  .header-layout-module-VlTuk .header-layout-module-HjY-a .header-layout-module-4Qp5b {
-      display: flex;
+  .announcement-module-Xi0L5 .announcement-module-4XVjD svg {
+      display: block;
     }
 
-  @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);
+  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-lxmA2 {
+      color: var(--icon-color);
+      grid-area: icon;
+      justify-self: center;
     }
 
-    .header-layout-module-VlTuk .header-layout-module-aBOJL {
-      display: none;
+  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y {
+      padding: var(--space-8) 0;
+      grid-area: content;
     }
 
-    .header-layout-module-VlTuk .header-layout-module--ICLK {
-      display: block;
+  @media (width >= 576px) {
+
+  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y {
+        display: flex;
+        flex-flow: row wrap
     }
-      .header-layout-module-VlTuk .header-layout-module-HjY-a .header-layout-module-fP3a6 {
-        display: block;
       }
-  }
 
-.navigation-link-list-module-Ku9Sa {
-  --max-width: 200px;
+  .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;
+      }
 
-  display: flex;
-  padding: 0;
-  margin: 0;
-  gap: var(--space-40);
-  list-style: none;
-}
+  @media (width >= 576px) {
 
-  .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;
-  }
+  .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)
+      }
+        }
 
-  .navigation-link-list-module-Ku9Sa .navigation-link-list-module-kj0Rj:hover {
-      color: var(--color-brand-red);
-    }
+  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module-yXGsN {
+        flex-shrink: 1;
+        margin: 0;
+      }
 
-  .navigation-link-list-module-Ku9Sa .navigation-link-list-module-kj0Rj .navigation-link-list-module-QiKiA {
-      flex-shrink: 0;
-      margin-inline-start: var(--space-4);
+  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module--Bhqj {
+        position: static;
+        flex-shrink: 1;
+        color: currentcolor;
+      }
+
+  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module--Bhqj:hover {
+          text-decoration: underline;
+        }
+
+  .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;
     }
 
-.sonic-logo-module-5zzhF {
-  display: block;
-}
+  .announcement-module-Xi0L5:where(.announcement-module-0LTWL) {
+    --icon-color: var(--color-semantic-information);
+  }
 
-  .sonic-logo-module-5zzhF,
-  .sonic-logo-module-5zzhF * {
-    box-sizing: border-box;
+  .announcement-module-Xi0L5:where(.announcement-module-Ga3lN) {
+    --icon-color: var(--color-semantic-notify);
   }
 
-  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq {
-    display: block;
-    width: auto;
-    height: auto;
+  .announcement-module-Xi0L5:where(.announcement-module-S3nSW) {
+    --icon-color: var(--color-semantic-stop);
   }
 
-  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq .sonic-logo-module-Pa7pF {
-      fill: var(--color-black);
-    }
+  .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);
+  }
 
-  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq .sonic-logo-module-vTCO3 {
-      fill: var(--color-brand-red);
+  .announcement-module-Xi0L5:where(.announcement-module-E6DqW):has([href]):hover {
+      --background-color: var(--color-brand-dark-red);
     }
 
-.center-module-Cr7hx {
-  display: grid;
-  width: 100%;
-  height: 100%;
-  min-height: inherit;
-  align-items: center;
-  place-content: center center;
+:root {
+  --announcements-bottom: var(--announcements-height);
 }
 
-.feature-list-module-cxc8U {
-  display: grid;
-  grid-template-columns: auto minmax(50%, 1fr);
+.announcement-list-module-Nn6HC {
+  position: relative;
+  z-index: var(--announcements-layer);
 }
 
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r {
-    display: contents;
+.announcement-list-module-Nn6HC.announcement-list-module-icXq8 {
+    position: sticky;
+    top: 0;
   }
 
-  .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;
-    }
+.announcement-list-module-Nn6HC .announcement-list-module-cgFNU {
+    display: flex;
+    flex-direction: column;
+  }
 
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-Tw0KD:empty {
-        padding: 0;
-      }
+.announcement-list-module-Nn6HC .announcement-list-module-fUupi {
+    margin-block: -1px;
+  }
 
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-J6Xfj {
-      font-weight: bold;
+.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;
     }
 
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-J6Xfj.feature-list-module-deI1- {
-        text-align: right;
-      }
+.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;
+    }
 
-  .feature-list-module-cxc8U .feature-list-module-tTJ2r .feature-list-module-CqSj1 {
-      display: flex;
-      flex-direction: column;
+.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;
     }
 
-  .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;
-  }
-
 .menu-list-module-TloB9 {
   --ml-font-size: var(--font-size-16);
   --ml-font-weight: var(--font-weight-normal);
@@ -5853,6 +5852,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,192 +6157,632 @@ 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);
-    margin-bottom: var(--space-12);
-  }
-
-  .orderline-list-module-v-FqO .orderline-list-module-JTZK3 .orderline-list-module-SMPUR {
-      margin: 0;
-    }
-
-  .orderline-list-module-v-FqO .orderline-list-module-JTZK3 .orderline-list-module-2WpLl svg {
-      width: 16px;
-      height: 16px;
-    }
+.panel-navigation-module-torfG {
+  position: relative;
+  display: grid;
+  block-size: inherit;
+  grid-template-columns: repeat(4, 1fr);
+}
 
-  .orderline-list-module-v-FqO .orderline-list-module-5COK6 {
-    display: grid;
+.panel-navigation-module-torfG.panel-navigation-module-7K80h {
+    overflow: hidden;
+    grid-template-columns: 1fr;
   }
 
-  .orderline-list-module-v-FqO .orderline-list-module-5COK6 .orderline-list-module-2p-Jd {
-      border-bottom: 1px solid #00000019;
-    }
-
-  .orderline-list-module-v-FqO .orderline-list-module-5COK6 .orderline-list-module-2p-Jd:first-child {
-        border-top: 1px solid #00000019;
-      }
+.panel-navigation-module-j3ZBu {
+  --transition-duration: 250ms;
 
-.blank-page-spacer-module-lXxle {
+  z-index: 2;
   display: grid;
-  width: 100%;
-  height: calc(100dvh - var(--header-height));
   background-color: var(--color-white);
-  place-items: center;
-}
-
-.loading-overlay-module-L67Gy {
-  position: fixed;
-  display: grid;
-  inset: 0;
-  place-items: center;
+  block-size: inherit;
+  border-inline: 1px solid var(--color-brand-light-gray);
+  margin-inline-start: -1px;
 }
 
-.images-grid-module-i5868 {
-  display: grid;
-  gap: var(--space-12);
-  grid-template-columns: repeat(2, 1fr);
-}
+/* only applies to the first panel, when more content than one menu is present, like in the mobile navigation */
 
-  .images-grid-module-i5868 .images-grid-module-nY9-n {
+.panel-navigation-module-j3ZBu.panel-navigation-module-1yGRP {
     display: flex;
-    width: 100%;
-    aspect-ratio: 1 / 1;
-    background-color: var(--color-brand-light-gray);
-    outline: none;
+    overflow: hidden auto;
+    flex-direction: column;
+    gap: var(--space-24);
+    scrollbar-width: thin;
   }
 
-  .images-grid-module-i5868 .images-grid-module-nY9-n .images-grid-module-TahRy {
-      mix-blend-mode: multiply;
+.panel-navigation-module-j3ZBu.panel-navigation-module-1yGRP > * {
+      flex-shrink: 0;
     }
 
-  .images-grid-module-i5868 .images-grid-module-nY9-n.images-grid-module-Ruktz {
-      cursor: pointer;
-    }
+.panel-navigation-module-j3ZBu:last-child {
+    z-index: 1;
+  }
 
-  .images-grid-module-i5868 .images-grid-module-nY9-n.images-grid-module-Ruktz:focus-visible {
-        box-shadow: var(--shadow-focus-outline);
-      }
+.panel-navigation-module-j3ZBu.exit-active,
+  .panel-navigation-module-j3ZBu.enter-active {
+    transition: translate var(--transition-duration) ease-in-out;
+  }
 
-  .images-grid-module-i5868[data-count='5'] .images-grid-module-nY9-n:nth-child(3) {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
+.panel-navigation-module-j3ZBu.exit-active,
+  .panel-navigation-module-j3ZBu.enter {
+    translate: -100% 0;
+  }
 
-  /* stylelint-disable-next-line no-descending-specificity */
+.panel-navigation-module-j3ZBu.enter-active {
+    translate: 0 0;
+  }
 
-  .images-grid-module-i5868[data-count='3'] .images-grid-module-nY9-n:nth-child(1) {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h {
+    position: absolute;
+    border: 0;
+    margin: 0;
+    inset: 0;
+  }
 
-  /* stylelint-disable-next-line no-descending-specificity */
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.exit-active,
+    .panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.enter {
+      translate: 100% 0;
+    }
 
-  .images-grid-module-i5868[data-count='2'] .images-grid-module-nY9-n {
-    grid-column: span 2;
-    grid-row: span 2;
-  }
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.enter-active {
+      translate: 0 0;
+    }
 
-  /* stylelint-disable-next-line no-descending-specificity */
+.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;
+    }
 
-  .images-grid-module-i5868[data-count='1'] .images-grid-module-nY9-n {
-    grid-column: span 2;
-    grid-row: span 2;
-  }
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h:has(+ .panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.exit-active) {
+      translate: 0 0;
+    }
 
-  @media (width >= 1440px) {.images-grid-module-i5868 {
-    gap: var(--space-16)
+.desktop-navigation-drawer-module-rXWPO {
+  /* TODO: wish I could get this to height auto with a max height */
+  block-size: min(
+    100%,
+    calc(100svh - var(--header-height) - var(--header-height))
+  );
 }
-  }
-
-.image-lightbox-module-9k3oJ {
-  --thumb-size: 80px;
 
-  width: 100%;
-  gap: var(--space-16);
+.sonic-logo-module-5zzhF {
+  display: block;
 }
 
-  .image-lightbox-module-9k3oJ,
-  .image-lightbox-module-9k3oJ * {
+  .sonic-logo-module-5zzhF,
+  .sonic-logo-module-5zzhF * {
     box-sizing: border-box;
   }
 
-  .image-lightbox-module-9k3oJ .swiper {
-      margin: 0;
+  .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);
     }
 
-  .image-lightbox-module-9k3oJ .image-lightbox-module-K5Gd0 {
-    width: auto;
+  .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)
+}
   }
 
-  .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi {
-    all: unset;
-    width: 100%;
-    aspect-ratio: 1;
-    cursor: zoom-in;
+  .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;
   }
 
-  .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi,
-  .image-lightbox-module-9k3oJ .image-lightbox-module-PUOMT {
-    display: flex;
-    background-color: var(--color-brand-light-gray);
+  .mobile-navigation-module-rMdS-.mobile-navigation-module-P0kLz .mobile-navigation-module-XKb3- {
+    translate: 0 0;
   }
 
-  .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi .image-lightbox-module-4RKLg, .image-lightbox-module-9k3oJ .image-lightbox-module-PUOMT .image-lightbox-module-4RKLg {
-      mix-blend-mode: multiply;
-    }
+  @starting-style {
 
-  .image-lightbox-module-9k3oJ .image-lightbox-module-PUOMT {
-    width: var(--thumb-size);
-    height: var(--thumb-size);
-    border: 2px solid transparent;
-    margin: auto;
-    cursor: pointer;
-    transition: border-color 0.2s ease;
+  .mobile-navigation-module-rMdS-.mobile-navigation-module-P0kLz .mobile-navigation-module-XKb3- {
+      translate: 100% 0
   }
-
-  .image-lightbox-module-9k3oJ .swiper-slide-thumb-active .image-lightbox-module-PUOMT {
-      border: 2px solid var(--color-brand-red);
-      cursor: default;
     }
 
-  .image-lightbox-module-9k3oJ .image-lightbox-module-hAy3O {
-    position: relative;
+  .mobile-navigation-module-rMdS- .mobile-navigation-module-keQoj {
+    grid-area: logo;
+    inline-size: var(--logo-size);
+    justify-self: center;
   }
 
-  .image-lightbox-module-9k3oJ .image-lightbox-module-nN1Kr {
-    position: absolute;
-    z-index: 1;
-    bottom: 20px;
-    left: 50%;
-    width: -moz-fit-content;
-    width: fit-content;
-    transform: translateX(-50%);
-  }
+  @media (width > 414px) {
 
-  .image-lightbox-module-9k3oJ:where(.image-lightbox-module-1idAN) {
-    display: flex;
-    flex-direction: column-reverse;
+  .mobile-navigation-module-rMdS- .mobile-navigation-module-keQoj {
+      display: none
   }
-
-  .image-lightbox-module-9k3oJ:where(.image-lightbox-module-1idAN) .image-lightbox-module-Xbxcn {
-      padding-inline: var(--space-16);
     }
 
-  .image-lightbox-module-9k3oJ:where(.image-lightbox-module--V8Xo) {
+  .mobile-navigation-module-rMdS- .mobile-navigation-module-3Z-Sl {
     display: grid;
-    grid-template-columns: var(--thumb-size) 1fr var(--thumb-size);
+    grid-area: hamburger;
   }
 
-  .image-lightbox-module-9k3oJ:where(.image-lightbox-module--V8Xo) .image-lightbox-module-hAy3O {
-      max-width: 640px;
+  .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);
+  }
+
+  .orderline-list-module-v-FqO .orderline-list-module-JTZK3 .orderline-list-module-SMPUR {
+      margin: 0;
+    }
+
+  .orderline-list-module-v-FqO .orderline-list-module-JTZK3 .orderline-list-module-2WpLl svg {
+      width: 16px;
+      height: 16px;
+    }
+
+  .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 {
+      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 var(--color-brand-light-gray);
+      }
+
+.blank-page-spacer-module-lXxle {
+  display: grid;
+  width: 100%;
+  height: calc(100dvh - var(--header-height));
+  background-color: var(--color-white);
+  place-items: center;
+}
+
+.loading-overlay-module-L67Gy {
+  position: fixed;
+  display: grid;
+  inset: 0;
+  place-items: center;
+}
+
+.images-grid-module-i5868 {
+  display: grid;
+  gap: var(--space-12);
+  grid-template-columns: repeat(2, 1fr);
+}
+
+  .images-grid-module-i5868 .images-grid-module-nY9-n {
+    display: flex;
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    background-color: var(--color-brand-light-gray);
+    outline: none;
+  }
+
+  .images-grid-module-i5868 .images-grid-module-nY9-n .images-grid-module-TahRy {
+      mix-blend-mode: multiply;
+    }
+
+  .images-grid-module-i5868 .images-grid-module-nY9-n.images-grid-module-Ruktz {
+      cursor: pointer;
+    }
+
+  .images-grid-module-i5868 .images-grid-module-nY9-n.images-grid-module-Ruktz:focus-visible {
+        box-shadow: var(--shadow-focus-outline);
+      }
+
+  .images-grid-module-i5868[data-count='5'] .images-grid-module-nY9-n:nth-child(3) {
+      grid-column: span 2;
+      grid-row: span 2;
+    }
+
+  /* stylelint-disable-next-line no-descending-specificity */
+
+  .images-grid-module-i5868[data-count='3'] .images-grid-module-nY9-n:nth-child(1) {
+      grid-column: span 2;
+      grid-row: span 2;
+    }
+
+  /* stylelint-disable-next-line no-descending-specificity */
+
+  .images-grid-module-i5868[data-count='2'] .images-grid-module-nY9-n {
+    grid-column: span 2;
+    grid-row: span 2;
+  }
+
+  /* stylelint-disable-next-line no-descending-specificity */
+
+  .images-grid-module-i5868[data-count='1'] .images-grid-module-nY9-n {
+    grid-column: span 2;
+    grid-row: span 2;
+  }
+
+  @media (width >= 1440px) {.images-grid-module-i5868 {
+    gap: var(--space-16)
+}
+  }
+
+.image-lightbox-module-9k3oJ {
+  --thumb-size: 80px;
+
+  width: 100%;
+  gap: var(--space-16);
+}
+
+  .image-lightbox-module-9k3oJ,
+  .image-lightbox-module-9k3oJ * {
+    box-sizing: border-box;
+  }
+
+  .image-lightbox-module-9k3oJ .swiper {
+      margin: 0;
+    }
+
+  .image-lightbox-module-9k3oJ .image-lightbox-module-K5Gd0 {
+    width: auto;
+  }
+
+  .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi {
+    all: unset;
+    width: 100%;
+    aspect-ratio: 1;
+    cursor: zoom-in;
+  }
+
+  .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi,
+  .image-lightbox-module-9k3oJ .image-lightbox-module-PUOMT {
+    display: flex;
+    background-color: var(--color-brand-light-gray);
+  }
+
+  .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi .image-lightbox-module-4RKLg, .image-lightbox-module-9k3oJ .image-lightbox-module-PUOMT .image-lightbox-module-4RKLg {
+      mix-blend-mode: multiply;
+    }
+
+  .image-lightbox-module-9k3oJ .image-lightbox-module-PUOMT {
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    border: 2px solid transparent;
+    margin: auto;
+    cursor: pointer;
+    transition: border-color 0.2s ease;
+  }
+
+  .image-lightbox-module-9k3oJ .swiper-slide-thumb-active .image-lightbox-module-PUOMT {
+      border: 2px solid var(--color-brand-red);
+      cursor: default;
+    }
+
+  .image-lightbox-module-9k3oJ .image-lightbox-module-hAy3O {
+    position: relative;
+  }
+
+  .image-lightbox-module-9k3oJ .image-lightbox-module-nN1Kr {
+    position: absolute;
+    z-index: 1;
+    bottom: 20px;
+    left: 50%;
+    width: -moz-fit-content;
+    width: fit-content;
+    transform: translateX(-50%);
+  }
+
+  .image-lightbox-module-9k3oJ:where(.image-lightbox-module-1idAN) {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  .image-lightbox-module-9k3oJ:where(.image-lightbox-module-1idAN) .image-lightbox-module-Xbxcn {
+      padding-inline: var(--space-16);
+    }
+
+  .image-lightbox-module-9k3oJ:where(.image-lightbox-module--V8Xo) {
+    display: grid;
+    grid-template-columns: var(--thumb-size) 1fr var(--thumb-size);
+  }
+
+  .image-lightbox-module-9k3oJ:where(.image-lightbox-module--V8Xo) .image-lightbox-module-hAy3O {
+      max-width: 640px;
       justify-self: center;
     }
 
@@ -6419,230 +6861,6 @@ 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);
-  --icon-color: currentcolor;
-  --border-color: var(--color-brand-red);
-}
-
-  .announcement-module-Xi0L5,
-  .announcement-module-Xi0L5 * {
-    box-sizing: border-box;
-  }
-
-  .announcement-module-Xi0L5 {
-
-  position: relative;
-  display: flex;
-  min-height: var(--announcement-bar-height);
-  padding: 13px 16px;
-  border: 1px solid var(--border-color);
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-
-  .announcement-module-Xi0L5 .announcement-module-4XVjD {
-    display: flex;
-    align-items: center;
-    padding-right: 56px;
-    gap: 8px;
-  }
-
-  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-lxmA2 {
-      color: var(--icon-color);
-    }
-
-  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-lxmA2 svg {
-        display: block;
-      }
-
-  .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;
-    }
-
-  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module-8k2rK {
-        margin: 0;
-        font-size: var(--font-size-base);
-        font-weight: var(--font-weight-black);
-        text-transform: uppercase;
-      }
-
-  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module-yXGsN {
-        flex-wrap: nowrap;
-        margin: 0;
-        color: currentcolor;
-        gap: 0;
-      }
-
-  .announcement-module-Xi0L5 .announcement-module-gZ9ae {
-    position: absolute;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-  }
-
-  .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:where(.announcement-module-0LTWL) {
-    --icon-color: var(--color-semantic-information);
-  }
-
-  .announcement-module-Xi0L5:where(.announcement-module-Ga3lN) {
-    --icon-color: var(--color-semantic-notify);
-  }
-
-  .announcement-module-Xi0L5:where(.announcement-module-S3nSW) {
-    --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 .announcement-module-4XVjD {
-      padding-right: 0;
-    }
-
-      .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;
-          }
-}
-
-.announcement-provider-module-sVIKY {
-  position: relative;
-  z-index: calc(var(--header-layer) + 1);
-}
-
-.announcement-provider-module-ksjgO {
-  margin-top: calc(-1 * var(--announcement-bar-height));
-}
-
-.announcement-provider-module-k0zd- {
-  margin-top: 0;
-  transition: margin-top 300ms linear;
-}
-
-.announcement-provider-module-w2N0B {
-  z-index: -1;
-  margin-top: 0;
-}
-
-.announcement-provider-module-4lfx2 {
-  margin-top: calc(-1 * var(--announcement-bar-height));
-  transition: margin-top 300ms linear;
-}
-
 .create-account-form-module-TMU8F {
   min-inline-size: 270px;
 }