@nok-integration/storefront-react 0.19.15 → 0.19.17

package/dist/standalone/styles.css

@@ -1708,14 +1708,34 @@
   height: 24px;
   color: var(--color-text-default);
 }
-._tile_1a177_7 {
+._swatches_mdi63_1 {
+  display: flex;
+  gap: var(--space-4);
+  align-items: center;
+}
+._swatch_mdi63_1 {
+  display: inline-flex;
+  padding: 2px;
+  box-shadow: inset 0 0 0 0.5px var(--color-border-full-color-subtle);
+  border-radius: var(--radius-2);
+}
+._swatchActive_mdi63_18 {
+  box-shadow: inset 0 0 0 0.5px var(--color-border-full-color-max);
+}
+._swatchDot_mdi63_22 {
+  display: block;
+  width: 14px;
+  height: 14px;
+  border-radius: var(--radius-2);
+}
+._tile_yg69t_7 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   text-decoration: none;
   color: inherit;
 }
-._media_1a177_15 {
+._media_yg69t_15 {
   position: relative;
   width: 100%;
   aspect-ratio: 165 / 220;
@@ -1723,15 +1743,15 @@
   overflow: hidden;
   background: var(--color-surface-soft);
 }
-._image_1a177_25 {
+._image_yg69t_25 {
   object-fit: cover;
 }
-._placeholder_1a177_29 {
+._placeholder_yg69t_29 {
   width: 100%;
   height: 100%;
   background: var(--color-surface-soft);
 }
-._topBadge_1a177_37 {
+._topBadge_yg69t_37 {
   position: absolute;
   top: var(--space-8);
   left: var(--space-8);
@@ -1752,13 +1772,13 @@
   text-transform: uppercase;
   white-space: nowrap;
 }
-._saleBadge_1a177_78 {
+._saleBadge_yg69t_78 {
   position: absolute;
   display: flex;
   bottom: var(--space-8);
   left: var(--space-8);
 }
-._oos_1a177_86 {
+._oos_yg69t_86 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -1770,17 +1790,17 @@
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-bold);
 }
-._bottom_1a177_113 {
+._bottom_yg69t_113 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
 }
-._titlePrice_1a177_100 {
+._titlePrice_yg69t_100 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
 }
-._title_1a177_5 {
+._title_yg69t_5 {
   font-size: var(--type-paragraph-size);
   line-height: 21px;
   padding: 5px 0;
@@ -1794,50 +1814,30 @@
   overflow: hidden;
   min-height: calc(2 * 21px + 10px);
 }
-._titlePrice_1a177_100 > :last-child {
+._titlePrice_yg69t_100 > :last-child {
   line-height: 11px;
 }
-._swatches_1a177_181 {
-  display: flex;
-  gap: var(--space-4);
-  align-items: center;
-}
-._swatch_1a177_181 {
-  display: inline-flex;
-  padding: 2px;
-  box-shadow: inset 0 0 0 0.5px var(--color-border-full-color-subtle);
-  border-radius: var(--radius-2);
-}
-._swatchActive_1a177_198 {
-  box-shadow: inset 0 0 0 0.5px var(--color-border-full-color-max);
-}
-._swatchDot_1a177_202 {
-  display: block;
-  width: 14px;
-  height: 14px;
-  border-radius: var(--radius-2);
-}
-._large_1a177_213 {
+._large_yg69t_185 {
   padding: 0 var(--space-16);
 }
-._large_1a177_213 ._media_1a177_15 {
+._large_yg69t_185 ._media_yg69t_15 {
   aspect-ratio: 343 / 457;
 }
-._large_1a177_213 ._title_1a177_5 {
+._large_yg69t_185 ._title_yg69t_5 {
   font-size: 18px;
   line-height: 23px;
   min-height: 0;
 }
-._tile_1a177_7:not(._large_1a177_213) ._swatches_1a177_181 {
+._tile_yg69t_7:not(._large_yg69t_185) ._swatchSlot_yg69t_223 {
   display: none;
 }
-._section_1n5an_5 {
+._section_v48ok_9 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: var(--space-24) 0;
 }
-._title_1n5an_17 {
+._title_v48ok_21 {
   margin: 0;
   padding: 0 var(--space-16);
   font-size: var(--type-heading-md-size);
@@ -1845,14 +1845,14 @@
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._link_1n5an_26 {
+._link_v48ok_30 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   text-decoration: none;
   color: inherit;
 }
-._track_1n5an_38 {
+._track_v48ok_42 {
   display: flex;
   gap: var(--space-12);
   list-style: none;
@@ -1864,10 +1864,10 @@
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
 }
-._track_1n5an_38::-webkit-scrollbar {
+._track_v48ok_42::-webkit-scrollbar {
   display: none;
 }
-._frame_1n5an_58 {
+._frame_v48ok_62 {
   position: relative;
   flex: 0 0 auto;
   width: 165px;
@@ -1877,20 +1877,20 @@
   background: var(--color-surface-soft);
   scroll-snap-align: start;
 }
-._image_1n5an_69 {
+._image_v48ok_73 {
   object-fit: cover;
 }
-._placeholder_1n5an_73 {
+._placeholder_v48ok_77 {
   width: 100%;
   height: 100%;
 }
-._saleBadge_1n5an_85 {
+._saleBadge_v48ok_89 {
   position: absolute;
   display: flex;
   bottom: var(--space-8);
   left: var(--space-8);
 }
-._oos_1n5an_93 {
+._oos_v48ok_97 {
   position: absolute;
   inset: 0;
   display: flex;
@@ -1901,13 +1901,16 @@
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-bold);
 }
-._caption_1n5an_109 {
+._caption_v48ok_113 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
   padding: 0 var(--space-16);
 }
-._name_1n5an_122 {
+._swatchRow_v48ok_132 {
+  margin-top: calc(var(--space-12) - var(--space-16));
+}
+._name_v48ok_142 {
   font-size: 18px;
   line-height: 23px;
   padding: 5px 0;
@@ -1918,7 +1921,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._price_1n5an_135 {
+._price_v48ok_155 {
   display: flex;
   align-items: baseline;
   gap: var(--space-4);
@@ -1926,11 +1929,11 @@
   line-height: 11px;
   font-variant-numeric: tabular-nums;
 }
-._paid_1n5an_144 {
+._paid_v48ok_164 {
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._was_1n5an_150 {
+._was_v48ok_170 {
   font-weight: var(--font-weight-bold);
   color: var(--color-text-disabled);
   text-decoration: line-through;
@@ -3104,7 +3107,7 @@
 ._oos_1hv16_66 {
   color: var(--color-state-surface-critical-default);
 }
-._hero_1glho_10 {
+._hero_wguje_10 {
   --hero-height: clamp(480px, calc(100svh - var(--hero-top, 0px)), 812px);
   position: relative;
   height: var(--hero-height);
@@ -3112,15 +3115,15 @@
   background: var(--color-surface-default);
   margin-bottom: calc(var(--hero-height) * -237 / 812);
 }
-._image_1glho_42 {
+._image_wguje_42 {
   position: absolute;
   inset: 0;
 }
-._image_1glho_42 img {
+._image_wguje_42 img {
   object-fit: cover;
   object-position: top center;
 }
-._scrim_1glho_70 {
+._scrim_wguje_70 {
   position: absolute;
   inset: 0;
   background:
@@ -3130,7 +3133,7 @@
       rgba(0, 0, 0, 0.1) 45%,
       rgba(0, 0, 0, 0) 70%);
 }
-._fade_1glho_94 {
+._fade_wguje_94 {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -3143,19 +3146,19 @@
       rgba(8, 14, 18, 0.65) 55%,
       var(--color-surface-default) 100%);
 }
-._text_1glho_108 {
+._text_wguje_108 {
   position: absolute;
-  top: max(var(--space-12), calc(106px - var(--hero-top, 0px)));
+  top: max(0px, calc(var(--space-12) - var(--hero-top, 0px)));
   left: 0;
   right: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-8);
-  padding: var(--space-12) var(--space-24) var(--space-24);
+  padding: 0 var(--space-24) var(--space-24);
   text-align: center;
 }
-._title_1glho_146 {
+._title_wguje_155 {
   width: 327px;
   max-width: 100%;
   margin: 0;
@@ -3165,7 +3168,7 @@
   color: #f9fafa;
   text-wrap: balance;
 }
-._subtitle_1glho_157 {
+._subtitle_wguje_166 {
   width: 224px;
   max-width: 100%;
   margin: 0;
@@ -3174,18 +3177,18 @@
   font-weight: var(--font-weight-regular);
   color: #f9fafa;
 }
-._noImage_1glho_172 {
+._noImage_wguje_181 {
   height: auto;
   min-height: 0;
   max-height: none;
   margin-bottom: 0;
 }
-._noImage_1glho_172 ._text_1glho_108 {
+._noImage_wguje_181 ._text_wguje_108 {
   position: static;
   padding-top: var(--space-24);
 }
-._noImage_1glho_172 ._title_1glho_146,
-._noImage_1glho_172 ._subtitle_1glho_157 {
+._noImage_wguje_181 ._title_wguje_155,
+._noImage_wguje_181 ._subtitle_wguje_166 {
   color: var(--color-text-default);
 }
 ._text_1saw4_6 {
@@ -3207,18 +3210,17 @@
   justify-content: flex-start;
   text-align: left;
 }
-._wrap_9mquf_1 {
-  padding: var(--space-24) var(--space-16);
+._wrap_79nr3_10 {
+  padding: var(--space-24) 0;
 }
-._box_9mquf_5 {
+._box_79nr3_14 {
   position: relative;
   width: 100%;
-  aspect-ratio: 343 / 425;
-  border-radius: var(--radius-18);
+  aspect-ratio: 3 / 4;
   overflow: hidden;
   background: var(--color-surface-soft);
 }
-._track_9mquf_15 {
+._track_79nr3_23 {
   display: flex;
   list-style: none;
   margin: 0;
@@ -3229,21 +3231,21 @@
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
 }
-._track_9mquf_15::-webkit-scrollbar {
+._track_79nr3_23::-webkit-scrollbar {
   display: none;
 }
-._slide_9mquf_31 {
+._slide_79nr3_39 {
   position: relative;
   flex: 0 0 100%;
   height: 100%;
   scroll-snap-align: start;
 }
-._image_9mquf_38 {
+._image_79nr3_46 {
   object-fit: cover;
 }
-._dots_9mquf_43 {
+._dots_79nr3_51 {
   position: absolute;
-  bottom: 4px;
+  bottom: 0;
   left: 0;
   right: 0;
   height: 32px;
@@ -3253,13 +3255,13 @@
   gap: var(--space-8);
   pointer-events: none;
 }
-._dot_9mquf_43 {
+._dot_79nr3_51 {
   width: 8px;
   height: 8px;
   border-radius: var(--radius-full);
   background: #9ea2a4;
 }
-._dotActive_9mquf_63 {
+._dotActive_79nr3_76 {
   background: #f9fafa;
 }
 ._section_kdf3c_1 {