@sonic-equipment/ui 173.0.0 → 175.0.0

package/dist/styles.css

@@ -813,6 +813,10 @@ html {
   vertical-align: text-bottom;
 }
 
+  .button-module-V4meK:where(.button-module-fepAr) {
+    font-weight: var(--font-weight-normal);
+  }
+
   .button-module-V4meK:where([data-disabled]) {
     cursor: default;
   }
@@ -880,7 +884,6 @@ html {
   padding: 0 var(--space-16);
   border-radius: var(--border-radius-20);
   font-style: normal;
-  font-weight: var(--font-weight-normal);
   text-transform: none;
 }
 
@@ -2560,116 +2563,197 @@ html {
 }
 
 .category-card-module-4NUjH {
+  --color: var(--color-black);
+  --image-margin: var(--space-12);
+  --gap: var(--space-8);
+  --image-scale: 1;
+  --image-size: 64px;
+  --duration: var(--transition-duration-short);
+
   all: unset;
   display: grid;
-  width: 88px;
+  color: var(--color);
   cursor: pointer;
-  padding-inline: 10px;
+  grid-template-columns: 1fr;
+  grid-template-rows: minmax(0, min-content) min-content;
   place-items: center;
   -webkit-tap-highlight-color: transparent;
 }
 
+  @container (min-width: 90px) {.category-card-module-4NUjH {
+    --image-margin: var(--space-8);
+    --image-size: 74px;
+    --gap: var(--space-12)
+}
+  }
+
+  @container (min-width: 96px) {.category-card-module-4NUjH {
+    --image-margin: 0;
+    --image-size: 96px;
+    --gap: var(--space-16)
+}
+  }
+
   .category-card-module-4NUjH,
   .category-card-module-4NUjH * {
     box-sizing: border-box;
   }
 
   .category-card-module-4NUjH .category-card-module-LEhh3 {
-    display: flex;
-    align-items: center;
-    margin-top: var(--space-8);
-    margin-bottom: 0;
-    gap: 2px;
-    transition: color 0.2s ease;
+    overflow: hidden;
+    align-self: flex-start;
+    font-size: var(--font-size-12);
+    font-style: italic;
+    font-weight: var(--font-weight-bold);
+    inline-size: 100%;
+    line-height: 1;
+    margin-block-start: var(--gap);
+    text-align: center;
+    text-transform: uppercase;
+    word-wrap: break-word;
   }
 
-  .category-card-module-4NUjH .category-card-module-LEhh3 span {
-      display: block;
-      font-size: var(--font-size-12);
-      font-style: italic;
-      font-weight: var(--font-weight-bold);
-      line-height: 1;
-      overflow-wrap: break-word;
-      text-align: center;
-      text-transform: uppercase;
-    }
-
-  .category-card-module-4NUjH .category-card-module-LEhh3 .category-card-module-hL4-A {
-      display: block;
-      margin-bottom: 1px;
-      color: var(--color-brand-red);
-    }
-
-  .category-card-module-4NUjH:hover .category-card-module-RxWMW, .category-card-module-4NUjH:focus .category-card-module-RxWMW {
-      scale: 1.15;
-    }
-
-  .category-card-module-4NUjH:hover .category-card-module-LEhh3, .category-card-module-4NUjH:focus .category-card-module-LEhh3 {
-      color: var(--color-brand-red);
-    }
-
-  .category-card-module-4NUjH:hover .category-card-module-LEhh3, .category-card-module-4NUjH:focus .category-card-module-LEhh3, .category-card-module-4NUjH.category-card-module-vJ7vB .category-card-module-LEhh3 {
-      color: var(--color-brand-red);
-    }
-
   .category-card-module-4NUjH .category-card-module-oNTrK {
     position: relative;
     display: flex;
-    width: 62px;
-    aspect-ratio: 1 / 1;
+    aspect-ratio: 1;
+    inline-size: var(--image-size);
+    margin-inline: var(--image-margin);
+    place-items: center;
+    place-self: center;
   }
 
   .category-card-module-4NUjH .category-card-module-oNTrK .category-card-module-RxWMW {
-      position: relative;
-      z-index: 1;
-      margin: auto;
-      aspect-ratio: 1;
       mix-blend-mode: multiply;
-      transition: scale 0.2s ease;
+      scale: var(--image-scale);
+      transition: scale var(--duration);
     }
 
   .category-card-module-4NUjH .category-card-module-oNTrK::after {
       position: absolute;
-      width: 52px;
+      z-index: -1;
       border-radius: 100%;
-      margin: auto;
-      aspect-ratio: 1 / 1;
-      background-color: var(--color-brand-light-gray);
+      aspect-ratio: 1;
+      background-color: rgb(0 0 0 / 7%);
       content: '';
-      inset: var(--space-2);
+      grid-area: 1 / -1;
+      inline-size: 83.5%;
+      inset: 50%;
+      translate: -50% -50%;
     }
 
-  @media (width >= 768px) {
-    .category-card-module-4NUjH .category-card-module-oNTrK {
-      width: 74px;
-    }
+  .category-card-module-4NUjH:hover,
+  .category-card-module-4NUjH:focus {
+    --color: var(--color-brand-red);
+    --image-scale: 1.15;
+  }
 
-      .category-card-module-4NUjH .category-card-module-oNTrK::after {
-        width: 62px;
-      }
+  .category-card-module-4NUjH.category-card-module-vJ7vB {
+    --color: var(--color-brand-red);
   }
 
-  @media (width >= 1024px) {.category-card-module-4NUjH {
-    padding-inline: 0
+.data-card-module-DMbBO {
+  margin-bottom: var(--space-12);
 }
-  }
 
-  @media (width >= 1440px) {.category-card-module-4NUjH {
-    width: 95px
+.data-card-module-24uin {
+  position: relative;
+  width: 100%;
+  min-height: 200px;
+  border: 1px solid var(--color-brand-medium-gray);
+  border-radius: var(--border-radius-22);
+  container-type: inline-size;
 }
 
-    .category-card-module-4NUjH .category-card-module-oNTrK {
-      width: 96px;
+.data-card-module-24uin .data-card-module-j-RFT {
+    position: absolute;
+    display: grid;
+    color: var(--color-brand-red);
+    inset: 0;
+    place-content: center;
+  }
+
+.data-card-module-24uin .data-card-module-d9zvu {
+    position: absolute;
+    display: grid;
+    inset: 0;
+    place-content: center;
+  }
+
+.data-card-module-24uin .data-card-module-FVD44 {
+    position: absolute;
+    display: grid;
+    inset: 0;
+    place-content: center;
+  }
+
+.data-card-module-24uin .data-card-module-ZefqY {
+    padding: var(--space-32) var(--space-32) var(--space-16);
+  }
+
+@container (max-width: 273px) {
+
+.data-card-module-24uin .data-card-module-ZefqY {
+      padding: var(--space-20) var(--space-16) var(--space-16)
+  }
+    }
+
+.data-card-module-24uin .data-card-module-ZefqY.data-card-module-Fb4Cx {
+      visibility: hidden;
     }
 
-      .category-card-module-4NUjH .category-card-module-oNTrK::after {
-        width: 80px;
+.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- {
+      display: grid;
+      margin: 0;
+      gap: var(--space-16);
+      grid-template-areas: 'key value';
+      grid-template-columns:
+        minmax(min-content, max-content)
+        minmax(min-content, 1fr);
+      line-height: 1;
+    }
+
+@container (max-width: 273px) {
+
+.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- {
+        grid-template-areas: unset;
+        grid-template-columns: 1fr
+    }
+      }
+
+.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- .data-card-module-FAgmN {
+        margin: 0;
+        font-weight: var(--font-weight-bold);
+        grid-template-areas: 'key';
+        text-align: right;
+      }
+
+@container (max-width: 273px) {
+
+.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- .data-card-module-FAgmN {
+          text-align: left
+      }
+        }
+
+.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- .data-card-module-fcSbu {
+        margin: 0;
+        font-weight: var(--font-weight-normal);
+        grid-template-areas: 'value';
       }
 
-    .category-card-module-4NUjH .category-card-module-LEhh3 {
+.data-card-module-24uin .data-card-module-ZefqY .data-card-module-Qv5iI {
+      display: flex;
+      justify-content: flex-end;
       margin-top: var(--space-16);
+      gap: var(--space-8);
     }
-  }
+
+@container (max-width: 273px) {
+
+.data-card-module-24uin .data-card-module-ZefqY .data-card-module-Qv5iI {
+        flex-direction: column
+    }
+      }
 
 .confirmation-dialog-module-Up-BC {
   max-width: 425px;
@@ -3060,24 +3144,23 @@ html {
   background-color: var(--color-white);
   block-size: 100%;
   color: var(--color-black);
-
-  /* cursor: pointer; */
   gap: 0 var(--space-8);
-  grid-template:
-    122px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
-      var(--space-8),
-      1fr
-    )
-    repeat(2, minmax(0, min-content)) / 1fr;
   grid-template-areas:
     'image'
-    '.'
     'tags'
     'title'
     'sku'
     '.'
     'price'
     'amount';
+  grid-template-columns: 1fr;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  grid-template-rows:
+    122px
+    var(--space-24)
+    repeat(2, minmax(0, min-content))
+    minmax(var(--space-16), 1fr)
+    repeat(2, minmax(0, min-content));
   inline-size: 100%;
   text-decoration: none;
   transition:
@@ -3117,7 +3200,7 @@ html {
     grid-area: title;
     -webkit-line-clamp: 4;
     line-height: 1;
-    margin-block-end: var(--space-8);
+    margin-block-end: var(--space-4);
     overflow-wrap: break-word;
     text-wrap: balance;
   }
@@ -3142,10 +3225,8 @@ html {
 
 .product-card-module-pLaiB .product-card-module-nL-hY {
     display: flex;
-    flex-wrap: wrap;
     gap: var(--space-4);
     grid-area: tags;
-    margin-block-end: var(--space-8);
   }
 
 .product-card-module-pLaiB .product-card-module-XzunM {
@@ -3165,7 +3246,7 @@ html {
 .product-card-module-pLaiB .product-card-module-irW0D {
     grid-area: price;
     margin-block-end: var(--space-8);
-    place-self: flex-end;
+    place-self: flex-end flex-start;
   }
 
 .product-card-module-pLaiB .product-card-module-SnCvX {
@@ -3180,20 +3261,21 @@ html {
 .product-card-module-pLaiB {
     --box-shadow: var(--box-shadow-heavy);
 
-    grid-template:
-      204px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
-        var(--space-16),
-        1fr
-      )
-      minmax(0, min-content) / 1fr minmax(0, max-content);
     grid-template-areas:
       'image image'
-      '. .'
       'tags tags'
       'title title'
       'sku sku'
       '. .'
-      'price amount'
+      'price amount';
+    grid-template-columns: 1fr minmax(0, max-content);
+    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+    grid-template-rows:
+      204px
+      var(--space-24)
+      repeat(2, minmax(0, min-content))
+      minmax(var(--space-24), 1fr)
+      minmax(0, min-content)
 }
 
     .product-card-module-pLaiB .product-card-module-irW0D {
@@ -3209,10 +3291,10 @@ html {
 
     padding: var(--space-16);
     grid-template-rows:
-      288px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
-        var(--space-24),
-        1fr
-      )
+      288px
+      var(--space-24)
+      repeat(2, minmax(0, min-content))
+      minmax(var(--space-32), 1fr)
       minmax(0, min-content)
 }
 
@@ -3224,25 +3306,45 @@ html {
     .product-card-module-pLaiB .product-card-module-irW0D {
       --price-toggle-size: var(--price-size-larger);
     }
+  }
 
-    .product-card-module-pLaiB .product-card-module-nL-hY {
-      margin-block-end: var(--space-16);
-    }
+@keyframes product-overview-grid-module-r-wvY {
+  99.999% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
   }
+}
+
+@keyframes product-overview-grid-module-A6CS7 {
+  50% {
+    background-color: rgb(255 255 255 / 0%);
+  }
+
+  100% {
+    background-color: rgb(255 255 255 / 80%);
+  }
+}
 
 .product-overview-grid-module-bzys- {
-  --amount-of-columns: 1;
+  --nr-of-columns: 1;
   --column-gap: 0;
   --row-gap: var(--space-16);
 
   position: relative;
   display: grid;
   gap: var(--row-gap) var(--column-gap);
-  grid-template-columns: repeat(var(--amount-of-columns), 1fr);
+  grid-template-columns: repeat(var(--nr-of-columns), 1fr);
+  grid-template-rows: repeat(
+    auto-fill,
+    [item-start] minmax(0, min-content) [item-end] 50px
+  );
   inline-size: 100%;
 }
 
-  .product-overview-grid-module-bzys- .product-overview-grid-module-XikkF {
+.product-overview-grid-module-bzys- .product-overview-grid-module-XikkF {
     position: absolute;
     z-index: var(--loading-layer);
     display: flex;
@@ -3257,43 +3359,16 @@ html {
             user-select: none;
   }
 
-  .product-overview-grid-module-bzys- .product-overview-grid-module-XikkF .product-overview-grid-module-DWnnI {
+.product-overview-grid-module-bzys- .product-overview-grid-module-XikkF .product-overview-grid-module-DWnnI {
       position: fixed;
       animation: product-overview-grid-module-r-wvY 1.2s linear forwards;
       inset-block-start: 50vh;
     }
 
-@keyframes product-overview-grid-module-r-wvY {
-  0% {
-    opacity: 0;
-  }
-
-  99% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes product-overview-grid-module-A6CS7 {
-  0% {
-    background-color: rgb(255 255 255 / 0%);
-  }
-
-  50% {
-    background-color: rgb(255 255 255 / 0%);
-  }
-
-  100% {
-    background-color: rgb(255 255 255 / 80%);
-  }
-}
-
 .product-overview-grid-module-MlUVA {
   position: relative;
   display: grid;
+  grid-row: span 2;
   min-block-size: 380px;
 }
 
@@ -3326,7 +3401,7 @@ html {
 
 @media (width >= 576px) {
   .product-overview-grid-module-bzys- {
-    --amount-of-columns: 2;
+    --nr-of-columns: 2;
     --row-gap: 0;
     --column-gap: var(--space-16);
   }
@@ -3365,7 +3440,7 @@ html {
 
 @media (width >= 1440px) {
   .product-overview-grid-module-bzys- {
-    --amount-of-columns: 3;
+    --nr-of-columns: 3;
   }
       .product-overview-grid-module-MlUVA:nth-child(2n)::after {
         display: block;
@@ -3757,19 +3832,15 @@ html {
 
   /* stylelint-disable-next-line no-descending-specificity */
 
-  /* stylelint-disable-next-line no-descending-specificity */
-
   .carousel-module-ealh-:has(.carousel-module-T7bTr:hover) .carousel-module-IftbN::after, .carousel-module-ealh-:has(.carousel-module-34OWD) .carousel-module-IftbN::after {
-        opacity: 0;
-      }
-
-  /* stylelint-disable-next-line no-descending-specificity */
+      opacity: 0;
+    }
 
   /* stylelint-disable-next-line no-descending-specificity */
 
   .carousel-module-ealh-:has(.carousel-module-984Rr:hover) .carousel-module-IftbN::before, .carousel-module-ealh-:has(.carousel-module-34OWD) .carousel-module-IftbN::before {
-        opacity: 0;
-      }
+      opacity: 0;
+    }
 
   .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-kcqEE {
       position: absolute;
@@ -3804,8 +3875,10 @@ html {
 
   @media (width < 1024px) {
     .carousel-module-ealh-:has(.carousel-module-tPg7k) {
-      inline-size: calc(100% + 20px);
-      margin-inline-start: -10px;
+      inline-size: calc(100% + var(--page-container-padding-inline, 10px) * 2);
+      margin-inline-start: calc(
+        var(--page-container-padding-inline, 10px) * -1
+      );
     }
 
     .carousel-module-ealh- .carousel-module-kcqEE {
@@ -3915,19 +3988,31 @@ html {
     }
 }
 
-  .category-carousel-module-muLq-:not(:last-child) {
-      margin-right: var(--space-8);
-    }
+.category-carousel-module--QCHm {
+  --gap: var(--space-8);
+  --slide-size: 88px;
+}
 
-      @media (width >= 1024px) {  .category-carousel-module-muLq-:not(:last-child) {
-        margin-right: var(--space-12)
-    }
-      }
+  .category-carousel-module--QCHm .swiper-slide {
+    container-type: inline-size;
+    inline-size: var(--slide-size);
+  }
 
-      @media (width >= 1440px) {  .category-carousel-module-muLq-:not(:last-child) {
-        margin-right: var(--space-16)
+  .category-carousel-module--QCHm .swiper-slide:not(:last-child) {
+      margin-right: var(--gap);
     }
-      }
+
+  @media (width >= 1024px) {.category-carousel-module--QCHm {
+    --gap: var(--space-12);
+    --slide-size: 92px
+}
+  }
+
+  @media (width >= 1440px) {.category-carousel-module--QCHm {
+    --gap: var(--space-16);
+    --slide-size: 96px
+}
+  }
 
 .pagination-module-pQ-Pu .pagination-module-EnswA {
     position: relative;
@@ -5135,68 +5220,82 @@ button.swiper-pagination-bullet {
 }
 
 .categories-grid-module-C751R {
-  --amount-of-columns: 2;
+  --nr-of-columns: 2;
+  --item-padding: var(--space-16);
   --border: 1px solid var(--color-brand-light-gray);
+  --card-image-size: 62px;
+  --card-gap: var(--space-8);
 
+  position: relative;
   display: grid;
-  grid-template-columns: repeat(var(--amount-of-columns), 1fr);
+  grid-template-columns: repeat(var(--nr-of-columns), 1fr);
 }
 
-  .categories-grid-module-C751R .categories-grid-module-7OZS1 {
-    position: relative;
-    display: grid;
-    padding: var(--space-16) var(--space-4);
-    place-items: center;
+  @media (0 <= width < 576px) {.categories-grid-module-C751R {
+    border-block-start: var(--border);
+    inline-size: calc(100% + (var(--padding-inline) * 2));
+    inset-inline-start: calc(var(--padding-inline) * -1)
+}
   }
 
-  .categories-grid-module-C751R .categories-grid-module-Q7i00 {
-    width: 100%;
-  }
+  @media (width >= 576px) {.categories-grid-module-C751R {
+    --nr-of-columns: 3;
 
-@media (0 <= width < 576px) {
-  .categories-grid-module-C751R {
-    position: relative;
-    left: calc(var(--padding-inline) * -1);
-    width: calc(100% + (var(--padding-inline) * 2));
-    border-top: var(--border);
+    border-block: var(--border)
+}
   }
 
-    .categories-grid-module-C751R .categories-grid-module-7OZS1 {
-      border-bottom: var(--border);
-    }
+  @media (width >= 1024px) {.categories-grid-module-C751R {
+    --nr-of-columns: 4;
+    --card-image-size: 74px;
 
-      .categories-grid-module-C751R .categories-grid-module-7OZS1:nth-child(odd) {
-        border-right: var(--border);
-      }
+    border: none;
+    gap: var(--space-16)
 }
+  }
 
-@media (width >= 576px) {
-  .categories-grid-module-C751R {
-    --amount-of-columns: 3;
+  @media (width >= 1440px) {.categories-grid-module-C751R {
+    --card-image-size: 96px;
+    --card-gap: var(--space-16)
+}
+  }
+
+  .categories-grid-module-C751R .categories-grid-module-7OZS1 {
+    display: grid;
+    padding: var(--item-padding);
+    container-type: inline-size;
+  }
+
+  @media (0 <= width < 576px) {
 
-    border-top: var(--border);
-    border-left: var(--border);
+  .categories-grid-module-C751R .categories-grid-module-7OZS1 {
+      border-block-end: var(--border)
   }
 
-    .categories-grid-module-C751R .categories-grid-module-7OZS1 {
-      border-right: var(--border);
-      border-bottom: var(--border);
+      .categories-grid-module-C751R .categories-grid-module-7OZS1:nth-child(odd) {
+        border-inline-end: var(--border);
+      }
     }
-}
 
-@media (width >= 1024px) {
-  .categories-grid-module-C751R {
-    --amount-of-columns: 4;
+  @media (width >= 576px) {
 
-    border: none;
-    background-color: unset;
-    gap: var(--space-16);
+  .categories-grid-module-C751R .categories-grid-module-7OZS1 {
+      border-block-end: var(--border);
+      border-inline-end: var(--border)
   }
+    }
 
-    .categories-grid-module-C751R .categories-grid-module-7OZS1 {
-      border: var(--border);
+  @media (width >= 1024px) {
+
+  .categories-grid-module-C751R .categories-grid-module-7OZS1 {
+      border: var(--border)
+  }
     }
-}
+
+  .categories-grid-module-C751R .categories-grid-module-Q7i00 {
+    --image-size: var(--card-image-size);
+    --gap: var(--card-gap);
+  }
 
 .search-input-module-xCCzd {
   box-sizing: border-box;
@@ -7341,6 +7440,10 @@ button.swiper-pagination-bullet {
   color: var(--color-brand-red);
 }
 
+.my-account-desktop-navigation-module-3BpoH {
+  font-weight: bold;
+}
+
 .product-details-page-layout-module-pPtZX {
   display: flex;
   flex-direction: column;