@nok-integration/storefront-react 0.29.0 → 0.29.2

package/dist/styles.css

@@ -2627,28 +2627,28 @@
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-16);
 }
-._rail_15pjn_7 {
+._rail_st5m2_7 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: var(--space-24) 0 var(--space-16);
 }
-._header_15pjn_14 {
+._header_st5m2_14 {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   padding: 0 var(--space-16);
 }
-._title_15pjn_21 {
+._title_st5m2_21 {
   font-size: var(--type-heading-md-size);
   line-height: 1.38;
 }
-._seeAll_15pjn_27 {
+._seeAll_st5m2_27 {
   font-size: var(--type-trimmed-sm-size);
   color: var(--color-text-subtle);
   text-decoration: none;
 }
-._track_15pjn_33 {
+._track_st5m2_33 {
   display: flex;
   gap: var(--space-12);
   list-style: none;
@@ -2660,41 +2660,42 @@
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
 }
-._track_15pjn_33::-webkit-scrollbar {
+._track_st5m2_33::-webkit-scrollbar {
   display: none;
 }
-._item_15pjn_67 {
+._item_st5m2_67 {
   flex: 0 0 auto;
   width: 165px;
   scroll-snap-align: start;
 }
-._inset_15pjn_79 ._header_15pjn_14 {
+._inset_st5m2_79 ._header_st5m2_14 {
   padding: 0;
 }
-._inset_15pjn_79 ._track_15pjn_33 {
+._inset_st5m2_79 ._track_st5m2_33 {
   padding-left: 0;
   padding-right: 0;
   scroll-padding-inline: 0;
 }
-._inset_15pjn_79 {
+._inset_st5m2_79 {
   padding: 0;
 }
-._inset_15pjn_79 ._item_15pjn_67 {
+._inset_st5m2_79 ._item_st5m2_67 {
   width: 165px;
   max-width: none;
 }
 @media (min-width: 1200px) {
-  [data-shop-layout=wide] ._inset_15pjn_79 ._track_15pjn_33 {
+  [data-shop-layout=wide] ._inset_st5m2_79 ._track_st5m2_33 {
     display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(4, minmax(0, 260px));
+    justify-content: start;
     gap: var(--space-12);
     padding: 0;
     overflow: visible;
   }
-  [data-shop-layout=wide] ._inset_15pjn_79 ._item_15pjn_67 {
+  [data-shop-layout=wide] ._inset_st5m2_79 ._item_st5m2_67 {
     width: auto;
   }
-  [data-shop-layout=wide] ._inset_15pjn_79 ._item_15pjn_67:nth-child(n+5) {
+  [data-shop-layout=wide] ._inset_st5m2_79 ._item_st5m2_67:nth-child(n+5) {
     display: none;
   }
 }
@@ -3019,7 +3020,7 @@
   text-decoration: line-through;
   white-space: nowrap;
 }
-._box_w9fja_1 {
+._box_tuawd_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
@@ -3027,26 +3028,31 @@
   border-radius: var(--radius-8);
   background: var(--color-surface-soft);
 }
-._row_w9fja_10 {
+._row_tuawd_10 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
 }
-._icon_w9fja_16 {
+._icon_tuawd_16 {
   display: block;
   flex-shrink: 0;
   color: var(--color-surface-max);
 }
-._label_w9fja_22 {
+._label_tuawd_22 {
   margin: 0;
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._divider_w9fja_29 {
+._divider_tuawd_29 {
   height: 1px;
   background: var(--color-border-default);
 }
+@media (min-width: 1200px) {
+  ._box_tuawd_1 {
+    background: var(--color-surface-default);
+  }
+}
 ._bar_23dkv_1 {
   position: sticky;
   bottom: 0;
@@ -3079,33 +3085,33 @@
 ._actions_23dkv_70 > * {
   flex: 1 1 0;
 }
-._surface_qvckt_15 {
+._surface_ws4so_15 {
   display: flex;
   flex-direction: column;
 }
-._screen_qvckt_20 {
+._screen_ws4so_20 {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
 }
-._body_qvckt_12 {
+._body_ws4so_12 {
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
   padding: var(--space-20) var(--space-16) 0;
   flex: 1 1 auto;
 }
-._items_qvckt_34 {
+._items_ws4so_34 {
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
 }
-._sectionHeader_qvckt_40 {
+._sectionHeader_ws4so_40 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
 }
-._sectionTitle_qvckt_46 {
+._sectionTitle_ws4so_46 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.38;
@@ -3113,7 +3119,7 @@
   flex: 1 0 0;
   min-width: 0;
 }
-._count_qvckt_67 {
+._count_ws4so_67 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3128,7 +3134,7 @@
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
 }
-._lines_qvckt_91 {
+._lines_ws4so_91 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -3136,18 +3142,32 @@
   flex-direction: column;
   gap: var(--space-20);
 }
-._footer_qvckt_101 {
+._footer_ws4so_101 {
+  display: contents;
+}
+._empty_ws4so_105 {
   display: contents;
 }
 @media (min-width: 1200px) {
-  [data-shop-panel] ._surface_qvckt_15 {
+  [data-shop-panel] ._empty_ws4so_105 p {
+    max-width: 402px;
+  }
+  [data-shop-panel] ._empty_ws4so_105 button {
+    width: 154px;
+    padding: 0;
+  }
+  [data-shop-panel] ._count_ws4so_67 {
+    border: 1px solid var(--color-border-default);
+    background: transparent;
+  }
+  [data-shop-panel] ._surface_ws4so_15 {
     justify-content: center;
     background: var(--color-surface-base);
   }
-  [data-shop-panel] ._body_qvckt_12 {
+  [data-shop-panel] ._body_ws4so_12 {
     padding: var(--space-4) var(--space-24) var(--space-24);
   }
-  [data-shop-panel] ._footer_qvckt_101 {
+  [data-shop-panel] ._footer_ws4so_101 {
     position: sticky;
     bottom: 0;
     z-index: 50;
@@ -3158,14 +3178,14 @@
     border-top: 1px solid #e6e6e6;
     background: var(--color-surface-base);
   }
-  [data-shop-panel] ._cta_qvckt_127 {
+  [data-shop-panel] ._cta_ws4so_145 {
     position: static;
     padding: 0;
     border-top: none;
     background: transparent;
   }
 }
-._ctaError_qvckt_135 {
+._ctaError_ws4so_153 {
   margin: 0;
   font-size: var(--type-caption-sm-size);
   line-height: var(--type-caption-sm-line);
@@ -3303,7 +3323,7 @@
 ._badges_1m6o7_49 li {
   background: var(--color-surface-default);
 }
-._scrim_n0uqj_8 {
+._scrim_mvuuv_8 {
   position: fixed;
   inset: 0;
   z-index: 60;
@@ -3311,9 +3331,9 @@
   align-items: flex-end;
   justify-content: center;
   background: rgba(12, 22, 28, 0.32);
-  animation: _fade_n0uqj_1 160ms ease-out;
+  animation: _fade_mvuuv_1 160ms ease-out;
 }
-._sheet_n0uqj_2 {
+._sheet_mvuuv_2 {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -3322,9 +3342,9 @@
   overflow: hidden;
   border-radius: 16px 16px 0 0;
   background: #ffffff;
-  animation: _rise_n0uqj_1 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  animation: _rise_mvuuv_1 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
-._body_n0uqj_40 {
+._body_mvuuv_40 {
   flex: 1 1 auto;
   overflow-y: auto;
   display: flex;
@@ -3334,31 +3354,31 @@
   background: var(--color-surface-default);
   scrollbar-width: none;
 }
-._body_n0uqj_40::-webkit-scrollbar {
+._body_mvuuv_40::-webkit-scrollbar {
   display: none;
 }
-._body_n0uqj_40 > * {
+._body_mvuuv_40 > * {
   flex-shrink: 0;
 }
-._titles_n0uqj_67 {
+._titles_mvuuv_67 {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
 }
-._title_n0uqj_67 {
+._title_mvuuv_67 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.32;
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._subtitle_n0uqj_83 {
+._subtitle_mvuuv_83 {
   margin: 0;
   font-size: var(--type-caption-sm-size);
   line-height: var(--type-caption-sm-line);
   color: var(--color-text-subtle);
 }
-._units_n0uqj_96 {
+._units_mvuuv_96 {
   display: flex;
   align-items: center;
   width: 190px;
@@ -3367,7 +3387,7 @@
   border-radius: 9px;
   background: var(--color-surface-soft);
 }
-._unit_n0uqj_96 {
+._unit_mvuuv_96 {
   flex: 1 1 0;
   display: inline-flex;
   align-items: center;
@@ -3383,35 +3403,35 @@
   line-height: 10px;
   cursor: pointer;
 }
-._unitOn_n0uqj_130 {
+._unitOn_mvuuv_130 {
   height: 32px;
   background: var(--color-surface-neutral);
   font-weight: var(--font-weight-bold);
 }
-._unitOff_n0uqj_138 {
+._unitOff_mvuuv_138 {
   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
   font-weight: var(--font-weight-regular);
 }
-._tableWrap_n0uqj_147 {
+._tableWrap_mvuuv_147 {
   overflow-x: auto;
   scrollbar-width: none;
 }
-._tableWrap_n0uqj_147::-webkit-scrollbar {
+._tableWrap_mvuuv_147::-webkit-scrollbar {
   display: none;
 }
-._table_n0uqj_147 {
+._table_mvuuv_147 {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   table-layout: fixed;
 }
-._col_n0uqj_179 {
+._col_mvuuv_179 {
   width: 18.6006%;
 }
-._colEdge_n0uqj_183 {
+._colEdge_mvuuv_183 {
   width: 22.0991%;
 }
-._table_n0uqj_147 thead th {
+._table_mvuuv_147 thead th {
   height: 36px;
   padding: 0;
   background: #f5f5f5;
@@ -3422,17 +3442,17 @@
   letter-spacing: 0.12px;
   text-align: center;
 }
-._table_n0uqj_147 thead th:first-child {
+._table_mvuuv_147 thead th:first-child {
   padding-left: var(--space-12);
   border-top-left-radius: var(--radius-8);
   text-align: left;
 }
-._table_n0uqj_147 thead th:last-child {
+._table_mvuuv_147 thead th:last-child {
   padding-right: var(--space-12);
   border-top-right-radius: var(--radius-8);
 }
-._table_n0uqj_147 tbody th,
-._table_n0uqj_147 tbody td {
+._table_mvuuv_147 tbody th,
+._table_mvuuv_147 tbody td {
   height: 44px;
   padding: 0;
   border-bottom: 1px solid var(--color-surface-soft);
@@ -3442,19 +3462,19 @@
   font-weight: var(--font-weight-regular);
   text-align: center;
 }
-._table_n0uqj_147 tbody th {
+._table_mvuuv_147 tbody th {
   padding-left: var(--space-12);
   font-weight: var(--font-weight-bold);
   text-align: left;
 }
-._table_n0uqj_147 tbody td:last-child {
+._table_mvuuv_147 tbody td:last-child {
   padding-right: var(--space-12);
 }
-._table_n0uqj_147 tbody tr:last-child th,
-._table_n0uqj_147 tbody tr:last-child td {
+._table_mvuuv_147 tbody tr:last-child th,
+._table_mvuuv_147 tbody tr:last-child td {
   border-bottom: 0;
 }
-._note_n0uqj_251 {
+._note_mvuuv_251 {
   margin: 0;
   padding: var(--space-8) var(--space-12);
   border-radius: var(--radius-8);
@@ -3463,35 +3483,35 @@
   font-size: var(--type-trimmed-xs-size);
   line-height: 1.52;
 }
-._how_n0uqj_263 {
+._how_mvuuv_263 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
 }
-._howTitle_n0uqj_269 {
+._howTitle_mvuuv_269 {
   margin: 0;
   font-size: var(--type-heading-sm-size);
   line-height: var(--type-heading-sm-line);
   font-weight: var(--font-weight-bold);
   color: #0d0d0d;
 }
-._howList_n0uqj_277 {
+._howList_mvuuv_277 {
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
 }
-._howItem_n0uqj_284 {
+._howItem_mvuuv_284 {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
 }
-._howItem_n0uqj_284 + ._howItem_n0uqj_284 {
+._howItem_mvuuv_284 + ._howItem_mvuuv_284 {
   margin-top: -1px;
   padding-top: var(--space-8);
   border-top: 1px solid var(--color-surface-soft);
 }
-._howLabel_n0uqj_309 {
+._howLabel_mvuuv_309 {
   padding: 5px 0;
   margin: -5px 0;
   font-size: var(--type-trimmed-xs-size);
@@ -3500,31 +3520,31 @@
   letter-spacing: 0.12px;
   color: #0d0d0d;
 }
-._howText_n0uqj_319 {
+._howText_mvuuv_319 {
   margin: 0;
   font-size: var(--type-trimmed-xs-size);
   line-height: 1.52;
   color: #6b6b6b;
 }
-._fabric_n0uqj_328 {
+._fabric_mvuuv_328 {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
 }
-._fabricLabel_n0uqj_336 {
+._fabricLabel_mvuuv_336 {
   margin: 0;
   font-size: var(--type-trimmed-xs-size);
   line-height: 1.52;
   font-weight: var(--font-weight-bold);
   color: #0d0d0d;
 }
-._fabricText_n0uqj_344 {
+._fabricText_mvuuv_344 {
   margin: 0;
   font-size: var(--type-trimmed-xs-size);
   line-height: 1.52;
   color: #6b6b6b;
 }
-._notes_n0uqj_355 {
+._notes_mvuuv_355 {
   margin: 0;
   padding-left: var(--space-16);
   display: flex;
@@ -3534,7 +3554,7 @@
   line-height: var(--type-caption-sm-line);
   color: var(--color-text-subtle);
 }
-@keyframes _fade_n0uqj_1 {
+@keyframes _fade_mvuuv_1 {
   from {
     opacity: 0;
   }
@@ -3542,7 +3562,7 @@
     opacity: 1;
   }
 }
-@keyframes _rise_n0uqj_1 {
+@keyframes _rise_mvuuv_1 {
   from {
     transform: translateY(12%);
   }
@@ -3551,27 +3571,29 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  ._scrim_n0uqj_8,
-  ._sheet_n0uqj_2 {
+  ._scrim_mvuuv_8,
+  ._sheet_mvuuv_2 {
     animation: none;
   }
 }
 @media (min-width: 1200px) {
-  body:has([data-shop-nav]) ._scrim_n0uqj_8 {
+  body:has([data-shop-nav]) ._scrim_mvuuv_8 {
     top: var(--shop-chrome-top, 0px);
     align-items: center;
+    background: rgba(0, 0, 0, 0.6);
   }
-  body:has([data-shop-nav]) ._sheet_n0uqj_2 {
+  body:has([data-shop-nav]) ._sheet_mvuuv_2 {
     max-width: 560px;
     max-height: min(720px, calc(100dvh - var(--shop-chrome-top, 0px) - 32px));
     padding-bottom: var(--space-24);
     border-radius: 16px;
-    animation: _fade_n0uqj_1 160ms ease-out;
+    animation: _fade_mvuuv_1 160ms ease-out;
   }
-  body:has([data-shop-nav]) ._body_n0uqj_40 {
+  body:has([data-shop-nav]) ._body_mvuuv_40 {
     padding-bottom: var(--space-24);
+    background: #ffffff;
   }
-  body:has([data-shop-nav]) ._sheet_n0uqj_2 [data-sheet-handle] {
+  body:has([data-shop-nav]) ._sheet_mvuuv_2 [data-sheet-handle] {
     visibility: hidden;
   }
 }
@@ -3670,12 +3692,12 @@
     background: var(--color-surface-soft);
   }
 }
-._root_1h4ny_1 {
+._root_1jst2_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
-._header_1h4ny_9 {
+._header_1jst2_9 {
   margin: 0;
   display: flex;
   align-items: center;
@@ -3683,20 +3705,20 @@
   font-size: var(--type-trimmed-md-size);
   line-height: var(--type-trimmed-md-line);
 }
-._title_1h4ny_18 {
+._title_1jst2_18 {
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._value_1h4ny_23 {
+._value_1jst2_23 {
   font-weight: var(--font-weight-regular);
   color: var(--color-text-subtle);
 }
-._tiles_1h4ny_28 {
+._tiles_1jst2_28 {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-8);
 }
-._tile_1h4ny_28 {
+._tile_1jst2_28 {
   position: relative;
   width: 79px;
   height: 105px;
@@ -3706,25 +3728,25 @@
   background: transparent;
   cursor: pointer;
 }
-._selected_1h4ny_52 {
+._selected_1jst2_52 {
   border-color: var(--color-surface-max);
 }
-._media_1h4ny_36 {
+._media_1jst2_36 {
   position: absolute;
   inset: 0;
   border-radius: var(--radius-8);
   overflow: hidden;
   background: var(--color-surface-soft);
 }
-._image_1h4ny_64 {
+._image_1jst2_64 {
   object-fit: cover;
 }
-._placeholder_1h4ny_68 {
+._placeholder_1jst2_68 {
   position: absolute;
   inset: 0;
   background: var(--color-surface-soft);
 }
-._scrim_1h4ny_76 {
+._scrim_1jst2_76 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -3737,7 +3759,7 @@
   font-weight: var(--font-weight-bold);
   text-align: center;
 }
-._stockBadge_1h4ny_95 {
+._stockBadge_1jst2_95 {
   position: absolute;
   top: -10px;
   left: 50px;
@@ -3755,6 +3777,12 @@
   white-space: nowrap;
   pointer-events: none;
 }
+@media (min-width: 1200px) {
+  ._tile_1jst2_28 {
+    width: 80px;
+    height: 106px;
+  }
+}
 ._fieldset_1mnz1_1 {
   border: none;
   margin: 0;
@@ -4036,7 +4064,7 @@
     padding: 0;
   }
 }
-._hero_1747w_10 {
+._hero_ht1e0_10 {
   --hero-height: clamp(480px, calc(100svh - var(--hero-top, 0px)), 812px);
   position: relative;
   height: var(--hero-height);
@@ -4044,15 +4072,15 @@
   background: var(--color-surface-default);
   margin-bottom: calc(var(--hero-height) * -237 / 812);
 }
-._image_1747w_42 {
+._image_ht1e0_42 {
   position: absolute;
   inset: 0;
 }
-._image_1747w_42 img {
+._image_ht1e0_42 img {
   object-fit: cover;
   object-position: top center;
 }
-._scrim_1747w_70 {
+._scrim_ht1e0_70 {
   position: absolute;
   inset: 0;
   background:
@@ -4062,7 +4090,7 @@
       rgba(0, 0, 0, 0.1) 45%,
       rgba(0, 0, 0, 0) 70%);
 }
-._fade_1747w_94 {
+._fade_ht1e0_94 {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -4075,7 +4103,7 @@
       rgba(8, 14, 18, 0.65) 55%,
       var(--color-surface-default) 100%);
 }
-._text_1747w_108 {
+._text_ht1e0_108 {
   position: absolute;
   top: max(var(--space-12), calc(65px - var(--hero-top, 0px)));
   left: 0;
@@ -4087,7 +4115,7 @@
   padding: var(--space-12) var(--space-24) var(--space-24);
   text-align: center;
 }
-._title_1747w_157 {
+._title_ht1e0_157 {
   width: 327px;
   max-width: 100%;
   margin: 0;
@@ -4097,7 +4125,7 @@
   color: #f9fafa;
   text-wrap: balance;
 }
-._subtitle_1747w_168 {
+._subtitle_ht1e0_168 {
   width: 224px;
   max-width: 100%;
   margin: 0;
@@ -4106,40 +4134,40 @@
   font-weight: var(--font-weight-regular);
   color: #f9fafa;
 }
-._noImage_1747w_183 {
+._noImage_ht1e0_183 {
   height: auto;
   min-height: 0;
   max-height: none;
   margin-bottom: 0;
 }
-._noImage_1747w_183 ._text_1747w_108 {
+._noImage_ht1e0_183 ._text_ht1e0_108 {
   position: static;
   padding-top: var(--space-24);
 }
-._noImage_1747w_183 ._title_1747w_157,
-._noImage_1747w_183 ._subtitle_1747w_168 {
+._noImage_ht1e0_183 ._title_ht1e0_157,
+._noImage_ht1e0_183 ._subtitle_ht1e0_168 {
   color: var(--color-text-default);
 }
 @media (min-width: 1200px) {
-  [data-shop-layout=wide] ._hero_1747w_10:not(._noImage_1747w_183) {
+  [data-shop-layout=wide] ._hero_ht1e0_10:not(._noImage_ht1e0_183) {
     height: 567px;
     margin-bottom: 0;
     overflow: visible;
   }
-  [data-shop-layout=wide] ._image_1747w_42,
-  [data-shop-layout=wide] ._fade_1747w_94 {
+  [data-shop-layout=wide] ._image_ht1e0_42,
+  [data-shop-layout=wide] ._fade_ht1e0_94 {
     top: 0;
     bottom: auto;
     height: 810px;
   }
-  [data-shop-layout=wide] ._fade_1747w_94 {
+  [data-shop-layout=wide] ._fade_ht1e0_94 {
     background:
       linear-gradient(
         to bottom,
         rgba(8, 14, 18, 0) 46.235%,
         #080e12 90.756%);
   }
-  [data-shop-layout=wide] ._scrim_1747w_70 {
+  [data-shop-layout=wide] ._scrim_ht1e0_70 {
     bottom: auto;
     height: 240px;
     background:
@@ -4148,9 +4176,9 @@
         rgba(8, 14, 18, 0.7),
         rgba(8, 14, 18, 0));
   }
-  [data-shop-layout=wide] ._text_1747w_108 {
+  [data-shop-layout=wide] ._text_ht1e0_108 {
     top: 477px;
-    left: max(176px, calc((100% - 1088px) / 2));
+    left: calc((100% - min(1088px, 100%)) / 2);
     right: auto;
     width: 560px;
     align-items: flex-start;
@@ -4158,20 +4186,20 @@
     padding: 0;
     text-align: left;
   }
-  [data-shop-layout=wide] ._noImage_1747w_183 ._text_1747w_108 {
+  [data-shop-layout=wide] ._noImage_ht1e0_183 ._text_ht1e0_108 {
     position: static;
     width: min(1088px, 100%);
     margin: 0 auto;
     padding-top: 88px;
   }
-  [data-shop-layout=wide] ._title_1747w_157 {
+  [data-shop-layout=wide] ._title_ht1e0_157 {
     width: auto;
     font-size: 64px;
     line-height: 0.9375;
     letter-spacing: -0.64px;
     white-space: nowrap;
   }
-  [data-shop-layout=wide] ._subtitle_1747w_168 {
+  [data-shop-layout=wide] ._subtitle_ht1e0_168 {
     width: 520px;
     font-size: 20px;
     line-height: 1.4;
@@ -4206,17 +4234,17 @@
     line-height: 1.1;
   }
 }
-._wrap_15g6o_10 {
+._wrap_1p70i_10 {
   padding: var(--space-24) 0;
 }
-._box_15g6o_14 {
+._box_1p70i_14 {
   position: relative;
   width: 100%;
   aspect-ratio: 3 / 4;
   overflow: hidden;
   background: var(--color-surface-soft);
 }
-._track_15g6o_23 {
+._track_1p70i_23 {
   display: flex;
   list-style: none;
   margin: 0;
@@ -4227,22 +4255,22 @@
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
 }
-._track_15g6o_23::-webkit-scrollbar {
+._track_1p70i_23::-webkit-scrollbar {
   display: none;
 }
-._slide_15g6o_39 {
+._slide_1p70i_39 {
   position: relative;
   flex: 0 0 100%;
   height: 100%;
   scroll-snap-align: start;
 }
-._image_15g6o_46 {
+._image_1p70i_46 {
   object-fit: cover;
 }
-._desktopArt_15g6o_50 {
+._desktopArt_1p70i_50 {
   display: none;
 }
-._dots_15g6o_55 {
+._dots_1p70i_55 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -4254,28 +4282,28 @@
   gap: var(--space-8);
   pointer-events: none;
 }
-._dot_15g6o_55 {
+._dot_1p70i_55 {
   width: 8px;
   height: 8px;
   border-radius: var(--radius-full);
   background: #9ea2a4;
 }
-._dotActive_15g6o_80 {
+._dotActive_1p70i_80 {
   background: #f9fafa;
 }
 @media (min-width: 1200px) {
-  ._phoneArt_15g6o_85 {
+  ._phoneArt_1p70i_85 {
     display: none;
   }
-  ._desktopArt_15g6o_50 {
+  ._desktopArt_1p70i_50 {
     display: block;
   }
-  [data-shop-layout=wide] ._wrap_15g6o_10 {
+  [data-shop-layout=wide] ._wrap_1p70i_10 {
     align-self: stretch;
     padding: 0;
   }
-  [data-shop-layout=wide] ._box_15g6o_14 {
-    aspect-ratio: 1440 / 810;
+  [data-shop-layout=wide] ._box_1p70i_14 {
+    aspect-ratio: 720 / 449;
   }
 }
 ._section_rtuv5_1 {
@@ -5443,7 +5471,7 @@
   width: auto;
   text-align: center;
 }
-._overlay_1vpmg_5 {
+._overlay_1aeep_5 {
   position: fixed;
   inset: 0;
   z-index: 900;
@@ -5452,12 +5480,12 @@
   justify-content: center;
   padding: calc(var(--header-height) + var(--space-16) + env(safe-area-inset-top, 0px)) var(--space-16) var(--space-16);
 }
-._scrim_1vpmg_21 {
+._scrim_1aeep_21 {
   position: absolute;
   inset: 0;
   background: rgba(12, 22, 28, 0.32);
 }
-._sheet_1vpmg_31 {
+._sheet_1aeep_31 {
   position: relative;
   width: 100%;
   max-width: 343px;
@@ -5468,13 +5496,13 @@
   border-radius: var(--radius-12);
   display: flex;
   flex-direction: column;
-  animation: _menu-in_1vpmg_1 160ms ease;
+  animation: _menu-in_1aeep_1 160ms ease;
   scrollbar-width: none;
 }
-._sheet_1vpmg_31::-webkit-scrollbar {
+._sheet_1aeep_31::-webkit-scrollbar {
   display: none;
 }
-@keyframes _menu-in_1vpmg_1 {
+@keyframes _menu-in_1aeep_1 {
   from {
     opacity: 0;
     transform: translateY(-8px);
@@ -5485,16 +5513,16 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  ._sheet_1vpmg_31 {
+  ._sheet_1aeep_31 {
     animation: none;
   }
 }
-._header_1vpmg_80 {
+._header_1aeep_80 {
   display: flex;
   justify-content: flex-end;
   border-bottom: 1px solid rgba(249, 250, 250, 0.2);
 }
-._close_1vpmg_86 {
+._close_1aeep_86 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5506,19 +5534,19 @@
   color: inherit;
   cursor: pointer;
 }
-._close_1vpmg_86:focus-visible {
+._close_1aeep_86:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
   border-radius: var(--radius-4);
 }
-._list_1vpmg_105 {
+._list_1aeep_105 {
   list-style: none;
   margin: 0;
   padding: var(--space-6) 0;
   display: flex;
   flex-direction: column;
 }
-._row_1vpmg_120 {
+._row_1aeep_120 {
   display: flex;
   align-items: center;
   gap: var(--space-8);
@@ -5531,39 +5559,39 @@
   text-align: left;
   cursor: pointer;
 }
-._row_1vpmg_120[disabled] {
+._row_1aeep_120[disabled] {
   cursor: default;
 }
-._row_1vpmg_120:focus-visible {
+._row_1aeep_120:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._icon_1vpmg_149 {
+._icon_1aeep_149 {
   display: inline-flex;
   flex: 0 0 24px;
   width: 24px;
   height: 24px;
   color: var(--color-text-default);
 }
-._text_1vpmg_157 {
+._text_1aeep_157 {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   gap: var(--space-2);
   min-width: 0;
 }
-._title_1vpmg_165 {
+._title_1aeep_165 {
   font-size: var(--type-paragraph-size);
   font-weight: var(--font-weight-bold);
   line-height: 1;
   color: var(--color-text-default);
 }
-._subtitle_1vpmg_172 {
+._subtitle_1aeep_172 {
   font-size: var(--type-trimmed-xs-size);
   line-height: 1.52;
   color: var(--color-text-subtle);
 }
-._chevron_1vpmg_178 {
+._chevron_1aeep_178 {
   display: inline-flex;
   flex: 0 0 16px;
   width: 16px;
@@ -5571,32 +5599,38 @@
   color: var(--color-text-subtle);
 }
 @media (min-width: 1200px) {
-  ._dropdown_1vpmg_187 {
+  ._dropdown_1aeep_187 {
     padding: 0;
   }
-  ._dropdown_1vpmg_187 ._scrim_1vpmg_21 {
+  ._dropdown_1aeep_187 ._scrim_1aeep_21 {
     background: transparent;
   }
-  ._dropdown_1vpmg_187 ._sheet_1vpmg_31 {
+  ._dropdown_1aeep_187 ._sheet_1aeep_31 {
     position: absolute;
     top: calc(var(--shop-chrome-top, 0px) + 64px);
-    right: calc(max(176px, calc((100% - 1088px) / 2)) - 112px);
-    width: 320px;
-    max-width: 320px;
+    right: calc(max(176px, calc((100% - 1088px) / 2)) - 8px);
+    width: 343px;
+    max-width: 343px;
     max-height: calc(100dvh - var(--shop-chrome-top, 0px) - 80px);
     border: 1px solid rgba(249, 250, 250, 0.2);
     background: #f9fafa;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
   }
-  ._dropdown_1vpmg_187 ._list_1vpmg_105 li:not(:last-child) ._row_1vpmg_120 {
+  ._dropdown_1aeep_187 ._header_1aeep_80 {
+    display: none;
+  }
+  ._dropdown_1aeep_187 ._row_1aeep_120 {
+    min-height: 48px;
+  }
+  ._dropdown_1aeep_187 ._list_1aeep_105 li:not(:last-child) ._row_1aeep_120 {
     border-bottom: 1px solid #dddedf;
   }
 }
-._bar_z6nk8_1 {
+._bar_10bv8_1 {
   display: none;
 }
 @media (min-width: 1200px) {
-  ._bar_z6nk8_1 {
+  ._bar_10bv8_1 {
     position: sticky;
     top: var(--shop-chrome-top, 0px);
     z-index: 40;
@@ -5605,20 +5639,20 @@
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    height: 64px;
+    height: var(--shop-nav-height, 64px);
     padding: 0 max(176px, calc((100% - 1088px) / 2));
     font-family: var(--font-family-base);
     font-size: 16px;
     line-height: normal;
   }
-  ._media_z6nk8_22 {
-    margin-bottom: -64px;
+  ._media_10bv8_22 {
+    margin-bottom: calc(-1 * var(--shop-nav-height, 64px));
     background: rgba(8, 14, 18, 0.55);
     color: #f9fafa;
     --shop-nav-separator: rgba(249, 250, 250, 0.6);
     --shop-nav-trail: rgba(249, 250, 250, 0.7);
   }
-  ._light_z6nk8_30 {
+  ._light_10bv8_30 {
     border-bottom: 1px solid rgba(8, 14, 18, 0.08);
     background: rgba(255, 255, 255, 0.85);
     -webkit-backdrop-filter: blur(12px);
@@ -5628,11 +5662,11 @@
     --shop-nav-trail: rgba(8, 14, 18, 0.7);
   }
 }
-._crumbs_z6nk8_41 {
+._crumbs_10bv8_41 {
   min-width: 0;
   overflow: hidden;
 }
-._list_z6nk8_46 {
+._list_10bv8_46 {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -5641,41 +5675,41 @@
   list-style: none;
   white-space: nowrap;
 }
-._item_z6nk8_56 {
+._item_10bv8_56 {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0;
 }
-._root_z6nk8_63,
-._trail_z6nk8_64,
-._current_z6nk8_65 {
+._root_10bv8_63,
+._trail_10bv8_64,
+._current_10bv8_65 {
   color: inherit;
   text-decoration: none;
 }
-._root_z6nk8_63 {
+._root_10bv8_63 {
   font-weight: var(--font-weight-bold);
 }
-._trail_z6nk8_64 {
+._trail_10bv8_64 {
   font-weight: var(--font-weight-regular);
   color: var(--shop-nav-trail);
 }
-._current_z6nk8_65 {
+._current_10bv8_65 {
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: var(--font-weight-regular);
 }
-._separator_z6nk8_85 {
+._separator_10bv8_85 {
   font-weight: var(--font-weight-regular);
   color: var(--shop-nav-separator);
 }
-._actions_z6nk8_90 {
+._actions_10bv8_90 {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   gap: var(--space-16);
 }
-._iconBtn_z6nk8_97 {
+._iconBtn_10bv8_97 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -5689,19 +5723,19 @@
   cursor: pointer;
   text-decoration: none;
 }
-._iconBtn_z6nk8_97::after {
+._iconBtn_10bv8_97::after {
   content: "";
   position: absolute;
   inset: -10px;
 }
-._iconBtn_z6nk8_97:focus-visible,
-._root_z6nk8_63:focus-visible,
-._trail_z6nk8_64:focus-visible {
+._iconBtn_10bv8_97:focus-visible,
+._root_10bv8_63:focus-visible,
+._trail_10bv8_64:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 2px;
   border-radius: var(--radius-4);
 }
-._badge_z6nk8_126 {
+._badge_10bv8_126 {
   position: absolute;
   top: -6px;
   left: 14px;