@nok-integration/storefront-react 0.29.1 → 0.29.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2627,28 +2627,28 @@
2627
2627
  grid-template-columns: repeat(2, 1fr);
2628
2628
  gap: var(--space-16);
2629
2629
  }
2630
- ._rail_15pjn_7 {
2630
+ ._rail_st5m2_7 {
2631
2631
  display: flex;
2632
2632
  flex-direction: column;
2633
2633
  gap: var(--space-12);
2634
2634
  padding: var(--space-24) 0 var(--space-16);
2635
2635
  }
2636
- ._header_15pjn_14 {
2636
+ ._header_st5m2_14 {
2637
2637
  display: flex;
2638
2638
  align-items: baseline;
2639
2639
  justify-content: space-between;
2640
2640
  padding: 0 var(--space-16);
2641
2641
  }
2642
- ._title_15pjn_21 {
2642
+ ._title_st5m2_21 {
2643
2643
  font-size: var(--type-heading-md-size);
2644
2644
  line-height: 1.38;
2645
2645
  }
2646
- ._seeAll_15pjn_27 {
2646
+ ._seeAll_st5m2_27 {
2647
2647
  font-size: var(--type-trimmed-sm-size);
2648
2648
  color: var(--color-text-subtle);
2649
2649
  text-decoration: none;
2650
2650
  }
2651
- ._track_15pjn_33 {
2651
+ ._track_st5m2_33 {
2652
2652
  display: flex;
2653
2653
  gap: var(--space-12);
2654
2654
  list-style: none;
@@ -2660,41 +2660,42 @@
2660
2660
  -webkit-overflow-scrolling: touch;
2661
2661
  scrollbar-width: none;
2662
2662
  }
2663
- ._track_15pjn_33::-webkit-scrollbar {
2663
+ ._track_st5m2_33::-webkit-scrollbar {
2664
2664
  display: none;
2665
2665
  }
2666
- ._item_15pjn_67 {
2666
+ ._item_st5m2_67 {
2667
2667
  flex: 0 0 auto;
2668
2668
  width: 165px;
2669
2669
  scroll-snap-align: start;
2670
2670
  }
2671
- ._inset_15pjn_79 ._header_15pjn_14 {
2671
+ ._inset_st5m2_79 ._header_st5m2_14 {
2672
2672
  padding: 0;
2673
2673
  }
2674
- ._inset_15pjn_79 ._track_15pjn_33 {
2674
+ ._inset_st5m2_79 ._track_st5m2_33 {
2675
2675
  padding-left: 0;
2676
2676
  padding-right: 0;
2677
2677
  scroll-padding-inline: 0;
2678
2678
  }
2679
- ._inset_15pjn_79 {
2679
+ ._inset_st5m2_79 {
2680
2680
  padding: 0;
2681
2681
  }
2682
- ._inset_15pjn_79 ._item_15pjn_67 {
2682
+ ._inset_st5m2_79 ._item_st5m2_67 {
2683
2683
  width: 165px;
2684
2684
  max-width: none;
2685
2685
  }
2686
2686
  @media (min-width: 1200px) {
2687
- [data-shop-layout=wide] ._inset_15pjn_79 ._track_15pjn_33 {
2687
+ [data-shop-layout=wide] ._inset_st5m2_79 ._track_st5m2_33 {
2688
2688
  display: grid;
2689
- grid-template-columns: repeat(4, minmax(0, 1fr));
2689
+ grid-template-columns: repeat(4, minmax(0, 260px));
2690
+ justify-content: start;
2690
2691
  gap: var(--space-12);
2691
2692
  padding: 0;
2692
2693
  overflow: visible;
2693
2694
  }
2694
- [data-shop-layout=wide] ._inset_15pjn_79 ._item_15pjn_67 {
2695
+ [data-shop-layout=wide] ._inset_st5m2_79 ._item_st5m2_67 {
2695
2696
  width: auto;
2696
2697
  }
2697
- [data-shop-layout=wide] ._inset_15pjn_79 ._item_15pjn_67:nth-child(n+5) {
2698
+ [data-shop-layout=wide] ._inset_st5m2_79 ._item_st5m2_67:nth-child(n+5) {
2698
2699
  display: none;
2699
2700
  }
2700
2701
  }
@@ -3084,33 +3085,33 @@
3084
3085
  ._actions_23dkv_70 > * {
3085
3086
  flex: 1 1 0;
3086
3087
  }
3087
- ._surface_qvckt_15 {
3088
+ ._surface_ws4so_15 {
3088
3089
  display: flex;
3089
3090
  flex-direction: column;
3090
3091
  }
3091
- ._screen_qvckt_20 {
3092
+ ._screen_ws4so_20 {
3092
3093
  display: flex;
3093
3094
  flex-direction: column;
3094
3095
  flex: 1 1 auto;
3095
3096
  }
3096
- ._body_qvckt_12 {
3097
+ ._body_ws4so_12 {
3097
3098
  display: flex;
3098
3099
  flex-direction: column;
3099
3100
  gap: var(--space-20);
3100
3101
  padding: var(--space-20) var(--space-16) 0;
3101
3102
  flex: 1 1 auto;
3102
3103
  }
3103
- ._items_qvckt_34 {
3104
+ ._items_ws4so_34 {
3104
3105
  display: flex;
3105
3106
  flex-direction: column;
3106
3107
  gap: var(--space-20);
3107
3108
  }
3108
- ._sectionHeader_qvckt_40 {
3109
+ ._sectionHeader_ws4so_40 {
3109
3110
  display: flex;
3110
3111
  align-items: center;
3111
3112
  gap: var(--space-12);
3112
3113
  }
3113
- ._sectionTitle_qvckt_46 {
3114
+ ._sectionTitle_ws4so_46 {
3114
3115
  margin: 0;
3115
3116
  font-size: var(--type-heading-md-size);
3116
3117
  line-height: 1.38;
@@ -3118,7 +3119,7 @@
3118
3119
  flex: 1 0 0;
3119
3120
  min-width: 0;
3120
3121
  }
3121
- ._count_qvckt_67 {
3122
+ ._count_ws4so_67 {
3122
3123
  display: inline-flex;
3123
3124
  align-items: center;
3124
3125
  justify-content: center;
@@ -3133,7 +3134,7 @@
3133
3134
  font-variant-numeric: tabular-nums;
3134
3135
  flex-shrink: 0;
3135
3136
  }
3136
- ._lines_qvckt_91 {
3137
+ ._lines_ws4so_91 {
3137
3138
  list-style: none;
3138
3139
  margin: 0;
3139
3140
  padding: 0;
@@ -3141,18 +3142,32 @@
3141
3142
  flex-direction: column;
3142
3143
  gap: var(--space-20);
3143
3144
  }
3144
- ._footer_qvckt_101 {
3145
+ ._footer_ws4so_101 {
3146
+ display: contents;
3147
+ }
3148
+ ._empty_ws4so_105 {
3145
3149
  display: contents;
3146
3150
  }
3147
3151
  @media (min-width: 1200px) {
3148
- [data-shop-panel] ._surface_qvckt_15 {
3152
+ [data-shop-panel] ._empty_ws4so_105 p {
3153
+ max-width: 402px;
3154
+ }
3155
+ [data-shop-panel] ._empty_ws4so_105 button {
3156
+ width: 154px;
3157
+ padding: 0;
3158
+ }
3159
+ [data-shop-panel] ._count_ws4so_67 {
3160
+ border: 1px solid var(--color-border-default);
3161
+ background: transparent;
3162
+ }
3163
+ [data-shop-panel] ._surface_ws4so_15 {
3149
3164
  justify-content: center;
3150
3165
  background: var(--color-surface-base);
3151
3166
  }
3152
- [data-shop-panel] ._body_qvckt_12 {
3167
+ [data-shop-panel] ._body_ws4so_12 {
3153
3168
  padding: var(--space-4) var(--space-24) var(--space-24);
3154
3169
  }
3155
- [data-shop-panel] ._footer_qvckt_101 {
3170
+ [data-shop-panel] ._footer_ws4so_101 {
3156
3171
  position: sticky;
3157
3172
  bottom: 0;
3158
3173
  z-index: 50;
@@ -3163,14 +3178,14 @@
3163
3178
  border-top: 1px solid #e6e6e6;
3164
3179
  background: var(--color-surface-base);
3165
3180
  }
3166
- [data-shop-panel] ._cta_qvckt_127 {
3181
+ [data-shop-panel] ._cta_ws4so_145 {
3167
3182
  position: static;
3168
3183
  padding: 0;
3169
3184
  border-top: none;
3170
3185
  background: transparent;
3171
3186
  }
3172
3187
  }
3173
- ._ctaError_qvckt_135 {
3188
+ ._ctaError_ws4so_153 {
3174
3189
  margin: 0;
3175
3190
  font-size: var(--type-caption-sm-size);
3176
3191
  line-height: var(--type-caption-sm-line);
@@ -3308,7 +3323,7 @@
3308
3323
  ._badges_1m6o7_49 li {
3309
3324
  background: var(--color-surface-default);
3310
3325
  }
3311
- ._scrim_n0uqj_8 {
3326
+ ._scrim_mvuuv_8 {
3312
3327
  position: fixed;
3313
3328
  inset: 0;
3314
3329
  z-index: 60;
@@ -3316,9 +3331,9 @@
3316
3331
  align-items: flex-end;
3317
3332
  justify-content: center;
3318
3333
  background: rgba(12, 22, 28, 0.32);
3319
- animation: _fade_n0uqj_1 160ms ease-out;
3334
+ animation: _fade_mvuuv_1 160ms ease-out;
3320
3335
  }
3321
- ._sheet_n0uqj_2 {
3336
+ ._sheet_mvuuv_2 {
3322
3337
  display: flex;
3323
3338
  flex-direction: column;
3324
3339
  width: 100%;
@@ -3327,9 +3342,9 @@
3327
3342
  overflow: hidden;
3328
3343
  border-radius: 16px 16px 0 0;
3329
3344
  background: #ffffff;
3330
- animation: _rise_n0uqj_1 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
3345
+ animation: _rise_mvuuv_1 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
3331
3346
  }
3332
- ._body_n0uqj_40 {
3347
+ ._body_mvuuv_40 {
3333
3348
  flex: 1 1 auto;
3334
3349
  overflow-y: auto;
3335
3350
  display: flex;
@@ -3339,31 +3354,31 @@
3339
3354
  background: var(--color-surface-default);
3340
3355
  scrollbar-width: none;
3341
3356
  }
3342
- ._body_n0uqj_40::-webkit-scrollbar {
3357
+ ._body_mvuuv_40::-webkit-scrollbar {
3343
3358
  display: none;
3344
3359
  }
3345
- ._body_n0uqj_40 > * {
3360
+ ._body_mvuuv_40 > * {
3346
3361
  flex-shrink: 0;
3347
3362
  }
3348
- ._titles_n0uqj_67 {
3363
+ ._titles_mvuuv_67 {
3349
3364
  display: flex;
3350
3365
  flex-direction: column;
3351
3366
  gap: var(--space-2);
3352
3367
  }
3353
- ._title_n0uqj_67 {
3368
+ ._title_mvuuv_67 {
3354
3369
  margin: 0;
3355
3370
  font-size: var(--type-heading-md-size);
3356
3371
  line-height: 1.32;
3357
3372
  font-weight: var(--font-weight-bold);
3358
3373
  color: var(--color-text-default);
3359
3374
  }
3360
- ._subtitle_n0uqj_83 {
3375
+ ._subtitle_mvuuv_83 {
3361
3376
  margin: 0;
3362
3377
  font-size: var(--type-caption-sm-size);
3363
3378
  line-height: var(--type-caption-sm-line);
3364
3379
  color: var(--color-text-subtle);
3365
3380
  }
3366
- ._units_n0uqj_96 {
3381
+ ._units_mvuuv_96 {
3367
3382
  display: flex;
3368
3383
  align-items: center;
3369
3384
  width: 190px;
@@ -3372,7 +3387,7 @@
3372
3387
  border-radius: 9px;
3373
3388
  background: var(--color-surface-soft);
3374
3389
  }
3375
- ._unit_n0uqj_96 {
3390
+ ._unit_mvuuv_96 {
3376
3391
  flex: 1 1 0;
3377
3392
  display: inline-flex;
3378
3393
  align-items: center;
@@ -3388,35 +3403,35 @@
3388
3403
  line-height: 10px;
3389
3404
  cursor: pointer;
3390
3405
  }
3391
- ._unitOn_n0uqj_130 {
3406
+ ._unitOn_mvuuv_130 {
3392
3407
  height: 32px;
3393
3408
  background: var(--color-surface-neutral);
3394
3409
  font-weight: var(--font-weight-bold);
3395
3410
  }
3396
- ._unitOff_n0uqj_138 {
3411
+ ._unitOff_mvuuv_138 {
3397
3412
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
3398
3413
  font-weight: var(--font-weight-regular);
3399
3414
  }
3400
- ._tableWrap_n0uqj_147 {
3415
+ ._tableWrap_mvuuv_147 {
3401
3416
  overflow-x: auto;
3402
3417
  scrollbar-width: none;
3403
3418
  }
3404
- ._tableWrap_n0uqj_147::-webkit-scrollbar {
3419
+ ._tableWrap_mvuuv_147::-webkit-scrollbar {
3405
3420
  display: none;
3406
3421
  }
3407
- ._table_n0uqj_147 {
3422
+ ._table_mvuuv_147 {
3408
3423
  width: 100%;
3409
3424
  border-collapse: separate;
3410
3425
  border-spacing: 0;
3411
3426
  table-layout: fixed;
3412
3427
  }
3413
- ._col_n0uqj_179 {
3428
+ ._col_mvuuv_179 {
3414
3429
  width: 18.6006%;
3415
3430
  }
3416
- ._colEdge_n0uqj_183 {
3431
+ ._colEdge_mvuuv_183 {
3417
3432
  width: 22.0991%;
3418
3433
  }
3419
- ._table_n0uqj_147 thead th {
3434
+ ._table_mvuuv_147 thead th {
3420
3435
  height: 36px;
3421
3436
  padding: 0;
3422
3437
  background: #f5f5f5;
@@ -3427,17 +3442,17 @@
3427
3442
  letter-spacing: 0.12px;
3428
3443
  text-align: center;
3429
3444
  }
3430
- ._table_n0uqj_147 thead th:first-child {
3445
+ ._table_mvuuv_147 thead th:first-child {
3431
3446
  padding-left: var(--space-12);
3432
3447
  border-top-left-radius: var(--radius-8);
3433
3448
  text-align: left;
3434
3449
  }
3435
- ._table_n0uqj_147 thead th:last-child {
3450
+ ._table_mvuuv_147 thead th:last-child {
3436
3451
  padding-right: var(--space-12);
3437
3452
  border-top-right-radius: var(--radius-8);
3438
3453
  }
3439
- ._table_n0uqj_147 tbody th,
3440
- ._table_n0uqj_147 tbody td {
3454
+ ._table_mvuuv_147 tbody th,
3455
+ ._table_mvuuv_147 tbody td {
3441
3456
  height: 44px;
3442
3457
  padding: 0;
3443
3458
  border-bottom: 1px solid var(--color-surface-soft);
@@ -3447,19 +3462,19 @@
3447
3462
  font-weight: var(--font-weight-regular);
3448
3463
  text-align: center;
3449
3464
  }
3450
- ._table_n0uqj_147 tbody th {
3465
+ ._table_mvuuv_147 tbody th {
3451
3466
  padding-left: var(--space-12);
3452
3467
  font-weight: var(--font-weight-bold);
3453
3468
  text-align: left;
3454
3469
  }
3455
- ._table_n0uqj_147 tbody td:last-child {
3470
+ ._table_mvuuv_147 tbody td:last-child {
3456
3471
  padding-right: var(--space-12);
3457
3472
  }
3458
- ._table_n0uqj_147 tbody tr:last-child th,
3459
- ._table_n0uqj_147 tbody tr:last-child td {
3473
+ ._table_mvuuv_147 tbody tr:last-child th,
3474
+ ._table_mvuuv_147 tbody tr:last-child td {
3460
3475
  border-bottom: 0;
3461
3476
  }
3462
- ._note_n0uqj_251 {
3477
+ ._note_mvuuv_251 {
3463
3478
  margin: 0;
3464
3479
  padding: var(--space-8) var(--space-12);
3465
3480
  border-radius: var(--radius-8);
@@ -3468,35 +3483,35 @@
3468
3483
  font-size: var(--type-trimmed-xs-size);
3469
3484
  line-height: 1.52;
3470
3485
  }
3471
- ._how_n0uqj_263 {
3486
+ ._how_mvuuv_263 {
3472
3487
  display: flex;
3473
3488
  flex-direction: column;
3474
3489
  gap: var(--space-16);
3475
3490
  }
3476
- ._howTitle_n0uqj_269 {
3491
+ ._howTitle_mvuuv_269 {
3477
3492
  margin: 0;
3478
3493
  font-size: var(--type-heading-sm-size);
3479
3494
  line-height: var(--type-heading-sm-line);
3480
3495
  font-weight: var(--font-weight-bold);
3481
3496
  color: #0d0d0d;
3482
3497
  }
3483
- ._howList_n0uqj_277 {
3498
+ ._howList_mvuuv_277 {
3484
3499
  margin: 0;
3485
3500
  display: flex;
3486
3501
  flex-direction: column;
3487
3502
  gap: var(--space-8);
3488
3503
  }
3489
- ._howItem_n0uqj_284 {
3504
+ ._howItem_mvuuv_284 {
3490
3505
  display: flex;
3491
3506
  flex-direction: column;
3492
3507
  gap: var(--space-8);
3493
3508
  }
3494
- ._howItem_n0uqj_284 + ._howItem_n0uqj_284 {
3509
+ ._howItem_mvuuv_284 + ._howItem_mvuuv_284 {
3495
3510
  margin-top: -1px;
3496
3511
  padding-top: var(--space-8);
3497
3512
  border-top: 1px solid var(--color-surface-soft);
3498
3513
  }
3499
- ._howLabel_n0uqj_309 {
3514
+ ._howLabel_mvuuv_309 {
3500
3515
  padding: 5px 0;
3501
3516
  margin: -5px 0;
3502
3517
  font-size: var(--type-trimmed-xs-size);
@@ -3505,31 +3520,31 @@
3505
3520
  letter-spacing: 0.12px;
3506
3521
  color: #0d0d0d;
3507
3522
  }
3508
- ._howText_n0uqj_319 {
3523
+ ._howText_mvuuv_319 {
3509
3524
  margin: 0;
3510
3525
  font-size: var(--type-trimmed-xs-size);
3511
3526
  line-height: 1.52;
3512
3527
  color: #6b6b6b;
3513
3528
  }
3514
- ._fabric_n0uqj_328 {
3529
+ ._fabric_mvuuv_328 {
3515
3530
  display: flex;
3516
3531
  flex-direction: column;
3517
3532
  gap: var(--space-2);
3518
3533
  }
3519
- ._fabricLabel_n0uqj_336 {
3534
+ ._fabricLabel_mvuuv_336 {
3520
3535
  margin: 0;
3521
3536
  font-size: var(--type-trimmed-xs-size);
3522
3537
  line-height: 1.52;
3523
3538
  font-weight: var(--font-weight-bold);
3524
3539
  color: #0d0d0d;
3525
3540
  }
3526
- ._fabricText_n0uqj_344 {
3541
+ ._fabricText_mvuuv_344 {
3527
3542
  margin: 0;
3528
3543
  font-size: var(--type-trimmed-xs-size);
3529
3544
  line-height: 1.52;
3530
3545
  color: #6b6b6b;
3531
3546
  }
3532
- ._notes_n0uqj_355 {
3547
+ ._notes_mvuuv_355 {
3533
3548
  margin: 0;
3534
3549
  padding-left: var(--space-16);
3535
3550
  display: flex;
@@ -3539,7 +3554,7 @@
3539
3554
  line-height: var(--type-caption-sm-line);
3540
3555
  color: var(--color-text-subtle);
3541
3556
  }
3542
- @keyframes _fade_n0uqj_1 {
3557
+ @keyframes _fade_mvuuv_1 {
3543
3558
  from {
3544
3559
  opacity: 0;
3545
3560
  }
@@ -3547,7 +3562,7 @@
3547
3562
  opacity: 1;
3548
3563
  }
3549
3564
  }
3550
- @keyframes _rise_n0uqj_1 {
3565
+ @keyframes _rise_mvuuv_1 {
3551
3566
  from {
3552
3567
  transform: translateY(12%);
3553
3568
  }
@@ -3556,27 +3571,29 @@
3556
3571
  }
3557
3572
  }
3558
3573
  @media (prefers-reduced-motion: reduce) {
3559
- ._scrim_n0uqj_8,
3560
- ._sheet_n0uqj_2 {
3574
+ ._scrim_mvuuv_8,
3575
+ ._sheet_mvuuv_2 {
3561
3576
  animation: none;
3562
3577
  }
3563
3578
  }
3564
3579
  @media (min-width: 1200px) {
3565
- body:has([data-shop-nav]) ._scrim_n0uqj_8 {
3580
+ body:has([data-shop-nav]) ._scrim_mvuuv_8 {
3566
3581
  top: var(--shop-chrome-top, 0px);
3567
3582
  align-items: center;
3583
+ background: rgba(0, 0, 0, 0.6);
3568
3584
  }
3569
- body:has([data-shop-nav]) ._sheet_n0uqj_2 {
3585
+ body:has([data-shop-nav]) ._sheet_mvuuv_2 {
3570
3586
  max-width: 560px;
3571
3587
  max-height: min(720px, calc(100dvh - var(--shop-chrome-top, 0px) - 32px));
3572
3588
  padding-bottom: var(--space-24);
3573
3589
  border-radius: 16px;
3574
- animation: _fade_n0uqj_1 160ms ease-out;
3590
+ animation: _fade_mvuuv_1 160ms ease-out;
3575
3591
  }
3576
- body:has([data-shop-nav]) ._body_n0uqj_40 {
3592
+ body:has([data-shop-nav]) ._body_mvuuv_40 {
3577
3593
  padding-bottom: var(--space-24);
3594
+ background: #ffffff;
3578
3595
  }
3579
- body:has([data-shop-nav]) ._sheet_n0uqj_2 [data-sheet-handle] {
3596
+ body:has([data-shop-nav]) ._sheet_mvuuv_2 [data-sheet-handle] {
3580
3597
  visibility: hidden;
3581
3598
  }
3582
3599
  }
@@ -3675,12 +3692,12 @@
3675
3692
  background: var(--color-surface-soft);
3676
3693
  }
3677
3694
  }
3678
- ._root_1h4ny_1 {
3695
+ ._root_1jst2_1 {
3679
3696
  display: flex;
3680
3697
  flex-direction: column;
3681
3698
  gap: var(--space-12);
3682
3699
  }
3683
- ._header_1h4ny_9 {
3700
+ ._header_1jst2_9 {
3684
3701
  margin: 0;
3685
3702
  display: flex;
3686
3703
  align-items: center;
@@ -3688,20 +3705,20 @@
3688
3705
  font-size: var(--type-trimmed-md-size);
3689
3706
  line-height: var(--type-trimmed-md-line);
3690
3707
  }
3691
- ._title_1h4ny_18 {
3708
+ ._title_1jst2_18 {
3692
3709
  font-weight: var(--font-weight-bold);
3693
3710
  color: var(--color-text-default);
3694
3711
  }
3695
- ._value_1h4ny_23 {
3712
+ ._value_1jst2_23 {
3696
3713
  font-weight: var(--font-weight-regular);
3697
3714
  color: var(--color-text-subtle);
3698
3715
  }
3699
- ._tiles_1h4ny_28 {
3716
+ ._tiles_1jst2_28 {
3700
3717
  display: flex;
3701
3718
  flex-wrap: wrap;
3702
3719
  gap: var(--space-8);
3703
3720
  }
3704
- ._tile_1h4ny_28 {
3721
+ ._tile_1jst2_28 {
3705
3722
  position: relative;
3706
3723
  width: 79px;
3707
3724
  height: 105px;
@@ -3711,25 +3728,25 @@
3711
3728
  background: transparent;
3712
3729
  cursor: pointer;
3713
3730
  }
3714
- ._selected_1h4ny_52 {
3731
+ ._selected_1jst2_52 {
3715
3732
  border-color: var(--color-surface-max);
3716
3733
  }
3717
- ._media_1h4ny_36 {
3734
+ ._media_1jst2_36 {
3718
3735
  position: absolute;
3719
3736
  inset: 0;
3720
3737
  border-radius: var(--radius-8);
3721
3738
  overflow: hidden;
3722
3739
  background: var(--color-surface-soft);
3723
3740
  }
3724
- ._image_1h4ny_64 {
3741
+ ._image_1jst2_64 {
3725
3742
  object-fit: cover;
3726
3743
  }
3727
- ._placeholder_1h4ny_68 {
3744
+ ._placeholder_1jst2_68 {
3728
3745
  position: absolute;
3729
3746
  inset: 0;
3730
3747
  background: var(--color-surface-soft);
3731
3748
  }
3732
- ._scrim_1h4ny_76 {
3749
+ ._scrim_1jst2_76 {
3733
3750
  position: absolute;
3734
3751
  inset: 0;
3735
3752
  display: flex;
@@ -3742,7 +3759,7 @@
3742
3759
  font-weight: var(--font-weight-bold);
3743
3760
  text-align: center;
3744
3761
  }
3745
- ._stockBadge_1h4ny_95 {
3762
+ ._stockBadge_1jst2_95 {
3746
3763
  position: absolute;
3747
3764
  top: -10px;
3748
3765
  left: 50px;
@@ -3760,6 +3777,12 @@
3760
3777
  white-space: nowrap;
3761
3778
  pointer-events: none;
3762
3779
  }
3780
+ @media (min-width: 1200px) {
3781
+ ._tile_1jst2_28 {
3782
+ width: 80px;
3783
+ height: 106px;
3784
+ }
3785
+ }
3763
3786
  ._fieldset_1mnz1_1 {
3764
3787
  border: none;
3765
3788
  margin: 0;
@@ -4041,7 +4064,7 @@
4041
4064
  padding: 0;
4042
4065
  }
4043
4066
  }
4044
- ._hero_1747w_10 {
4067
+ ._hero_ht1e0_10 {
4045
4068
  --hero-height: clamp(480px, calc(100svh - var(--hero-top, 0px)), 812px);
4046
4069
  position: relative;
4047
4070
  height: var(--hero-height);
@@ -4049,15 +4072,15 @@
4049
4072
  background: var(--color-surface-default);
4050
4073
  margin-bottom: calc(var(--hero-height) * -237 / 812);
4051
4074
  }
4052
- ._image_1747w_42 {
4075
+ ._image_ht1e0_42 {
4053
4076
  position: absolute;
4054
4077
  inset: 0;
4055
4078
  }
4056
- ._image_1747w_42 img {
4079
+ ._image_ht1e0_42 img {
4057
4080
  object-fit: cover;
4058
4081
  object-position: top center;
4059
4082
  }
4060
- ._scrim_1747w_70 {
4083
+ ._scrim_ht1e0_70 {
4061
4084
  position: absolute;
4062
4085
  inset: 0;
4063
4086
  background:
@@ -4067,7 +4090,7 @@
4067
4090
  rgba(0, 0, 0, 0.1) 45%,
4068
4091
  rgba(0, 0, 0, 0) 70%);
4069
4092
  }
4070
- ._fade_1747w_94 {
4093
+ ._fade_ht1e0_94 {
4071
4094
  position: absolute;
4072
4095
  right: 0;
4073
4096
  bottom: 0;
@@ -4080,7 +4103,7 @@
4080
4103
  rgba(8, 14, 18, 0.65) 55%,
4081
4104
  var(--color-surface-default) 100%);
4082
4105
  }
4083
- ._text_1747w_108 {
4106
+ ._text_ht1e0_108 {
4084
4107
  position: absolute;
4085
4108
  top: max(var(--space-12), calc(65px - var(--hero-top, 0px)));
4086
4109
  left: 0;
@@ -4092,7 +4115,7 @@
4092
4115
  padding: var(--space-12) var(--space-24) var(--space-24);
4093
4116
  text-align: center;
4094
4117
  }
4095
- ._title_1747w_157 {
4118
+ ._title_ht1e0_157 {
4096
4119
  width: 327px;
4097
4120
  max-width: 100%;
4098
4121
  margin: 0;
@@ -4102,7 +4125,7 @@
4102
4125
  color: #f9fafa;
4103
4126
  text-wrap: balance;
4104
4127
  }
4105
- ._subtitle_1747w_168 {
4128
+ ._subtitle_ht1e0_168 {
4106
4129
  width: 224px;
4107
4130
  max-width: 100%;
4108
4131
  margin: 0;
@@ -4111,40 +4134,40 @@
4111
4134
  font-weight: var(--font-weight-regular);
4112
4135
  color: #f9fafa;
4113
4136
  }
4114
- ._noImage_1747w_183 {
4137
+ ._noImage_ht1e0_183 {
4115
4138
  height: auto;
4116
4139
  min-height: 0;
4117
4140
  max-height: none;
4118
4141
  margin-bottom: 0;
4119
4142
  }
4120
- ._noImage_1747w_183 ._text_1747w_108 {
4143
+ ._noImage_ht1e0_183 ._text_ht1e0_108 {
4121
4144
  position: static;
4122
4145
  padding-top: var(--space-24);
4123
4146
  }
4124
- ._noImage_1747w_183 ._title_1747w_157,
4125
- ._noImage_1747w_183 ._subtitle_1747w_168 {
4147
+ ._noImage_ht1e0_183 ._title_ht1e0_157,
4148
+ ._noImage_ht1e0_183 ._subtitle_ht1e0_168 {
4126
4149
  color: var(--color-text-default);
4127
4150
  }
4128
4151
  @media (min-width: 1200px) {
4129
- [data-shop-layout=wide] ._hero_1747w_10:not(._noImage_1747w_183) {
4152
+ [data-shop-layout=wide] ._hero_ht1e0_10:not(._noImage_ht1e0_183) {
4130
4153
  height: 567px;
4131
4154
  margin-bottom: 0;
4132
4155
  overflow: visible;
4133
4156
  }
4134
- [data-shop-layout=wide] ._image_1747w_42,
4135
- [data-shop-layout=wide] ._fade_1747w_94 {
4157
+ [data-shop-layout=wide] ._image_ht1e0_42,
4158
+ [data-shop-layout=wide] ._fade_ht1e0_94 {
4136
4159
  top: 0;
4137
4160
  bottom: auto;
4138
4161
  height: 810px;
4139
4162
  }
4140
- [data-shop-layout=wide] ._fade_1747w_94 {
4163
+ [data-shop-layout=wide] ._fade_ht1e0_94 {
4141
4164
  background:
4142
4165
  linear-gradient(
4143
4166
  to bottom,
4144
4167
  rgba(8, 14, 18, 0) 46.235%,
4145
4168
  #080e12 90.756%);
4146
4169
  }
4147
- [data-shop-layout=wide] ._scrim_1747w_70 {
4170
+ [data-shop-layout=wide] ._scrim_ht1e0_70 {
4148
4171
  bottom: auto;
4149
4172
  height: 240px;
4150
4173
  background:
@@ -4153,9 +4176,9 @@
4153
4176
  rgba(8, 14, 18, 0.7),
4154
4177
  rgba(8, 14, 18, 0));
4155
4178
  }
4156
- [data-shop-layout=wide] ._text_1747w_108 {
4179
+ [data-shop-layout=wide] ._text_ht1e0_108 {
4157
4180
  top: 477px;
4158
- left: max(176px, calc((100% - 1088px) / 2));
4181
+ left: calc((100% - min(1088px, 100%)) / 2);
4159
4182
  right: auto;
4160
4183
  width: 560px;
4161
4184
  align-items: flex-start;
@@ -4163,20 +4186,20 @@
4163
4186
  padding: 0;
4164
4187
  text-align: left;
4165
4188
  }
4166
- [data-shop-layout=wide] ._noImage_1747w_183 ._text_1747w_108 {
4189
+ [data-shop-layout=wide] ._noImage_ht1e0_183 ._text_ht1e0_108 {
4167
4190
  position: static;
4168
4191
  width: min(1088px, 100%);
4169
4192
  margin: 0 auto;
4170
4193
  padding-top: 88px;
4171
4194
  }
4172
- [data-shop-layout=wide] ._title_1747w_157 {
4195
+ [data-shop-layout=wide] ._title_ht1e0_157 {
4173
4196
  width: auto;
4174
4197
  font-size: 64px;
4175
4198
  line-height: 0.9375;
4176
4199
  letter-spacing: -0.64px;
4177
4200
  white-space: nowrap;
4178
4201
  }
4179
- [data-shop-layout=wide] ._subtitle_1747w_168 {
4202
+ [data-shop-layout=wide] ._subtitle_ht1e0_168 {
4180
4203
  width: 520px;
4181
4204
  font-size: 20px;
4182
4205
  line-height: 1.4;
@@ -4211,17 +4234,17 @@
4211
4234
  line-height: 1.1;
4212
4235
  }
4213
4236
  }
4214
- ._wrap_15g6o_10 {
4237
+ ._wrap_1p70i_10 {
4215
4238
  padding: var(--space-24) 0;
4216
4239
  }
4217
- ._box_15g6o_14 {
4240
+ ._box_1p70i_14 {
4218
4241
  position: relative;
4219
4242
  width: 100%;
4220
4243
  aspect-ratio: 3 / 4;
4221
4244
  overflow: hidden;
4222
4245
  background: var(--color-surface-soft);
4223
4246
  }
4224
- ._track_15g6o_23 {
4247
+ ._track_1p70i_23 {
4225
4248
  display: flex;
4226
4249
  list-style: none;
4227
4250
  margin: 0;
@@ -4232,22 +4255,22 @@
4232
4255
  -webkit-overflow-scrolling: touch;
4233
4256
  scrollbar-width: none;
4234
4257
  }
4235
- ._track_15g6o_23::-webkit-scrollbar {
4258
+ ._track_1p70i_23::-webkit-scrollbar {
4236
4259
  display: none;
4237
4260
  }
4238
- ._slide_15g6o_39 {
4261
+ ._slide_1p70i_39 {
4239
4262
  position: relative;
4240
4263
  flex: 0 0 100%;
4241
4264
  height: 100%;
4242
4265
  scroll-snap-align: start;
4243
4266
  }
4244
- ._image_15g6o_46 {
4267
+ ._image_1p70i_46 {
4245
4268
  object-fit: cover;
4246
4269
  }
4247
- ._desktopArt_15g6o_50 {
4270
+ ._desktopArt_1p70i_50 {
4248
4271
  display: none;
4249
4272
  }
4250
- ._dots_15g6o_55 {
4273
+ ._dots_1p70i_55 {
4251
4274
  position: absolute;
4252
4275
  bottom: 0;
4253
4276
  left: 0;
@@ -4259,28 +4282,28 @@
4259
4282
  gap: var(--space-8);
4260
4283
  pointer-events: none;
4261
4284
  }
4262
- ._dot_15g6o_55 {
4285
+ ._dot_1p70i_55 {
4263
4286
  width: 8px;
4264
4287
  height: 8px;
4265
4288
  border-radius: var(--radius-full);
4266
4289
  background: #9ea2a4;
4267
4290
  }
4268
- ._dotActive_15g6o_80 {
4291
+ ._dotActive_1p70i_80 {
4269
4292
  background: #f9fafa;
4270
4293
  }
4271
4294
  @media (min-width: 1200px) {
4272
- ._phoneArt_15g6o_85 {
4295
+ ._phoneArt_1p70i_85 {
4273
4296
  display: none;
4274
4297
  }
4275
- ._desktopArt_15g6o_50 {
4298
+ ._desktopArt_1p70i_50 {
4276
4299
  display: block;
4277
4300
  }
4278
- [data-shop-layout=wide] ._wrap_15g6o_10 {
4301
+ [data-shop-layout=wide] ._wrap_1p70i_10 {
4279
4302
  align-self: stretch;
4280
4303
  padding: 0;
4281
4304
  }
4282
- [data-shop-layout=wide] ._box_15g6o_14 {
4283
- aspect-ratio: 1440 / 810;
4305
+ [data-shop-layout=wide] ._box_1p70i_14 {
4306
+ aspect-ratio: 720 / 449;
4284
4307
  }
4285
4308
  }
4286
4309
  ._section_rtuv5_1 {
@@ -5448,7 +5471,7 @@
5448
5471
  width: auto;
5449
5472
  text-align: center;
5450
5473
  }
5451
- ._overlay_sz96n_5 {
5474
+ ._overlay_1aeep_5 {
5452
5475
  position: fixed;
5453
5476
  inset: 0;
5454
5477
  z-index: 900;
@@ -5457,12 +5480,12 @@
5457
5480
  justify-content: center;
5458
5481
  padding: calc(var(--header-height) + var(--space-16) + env(safe-area-inset-top, 0px)) var(--space-16) var(--space-16);
5459
5482
  }
5460
- ._scrim_sz96n_21 {
5483
+ ._scrim_1aeep_21 {
5461
5484
  position: absolute;
5462
5485
  inset: 0;
5463
5486
  background: rgba(12, 22, 28, 0.32);
5464
5487
  }
5465
- ._sheet_sz96n_31 {
5488
+ ._sheet_1aeep_31 {
5466
5489
  position: relative;
5467
5490
  width: 100%;
5468
5491
  max-width: 343px;
@@ -5473,13 +5496,13 @@
5473
5496
  border-radius: var(--radius-12);
5474
5497
  display: flex;
5475
5498
  flex-direction: column;
5476
- animation: _menu-in_sz96n_1 160ms ease;
5499
+ animation: _menu-in_1aeep_1 160ms ease;
5477
5500
  scrollbar-width: none;
5478
5501
  }
5479
- ._sheet_sz96n_31::-webkit-scrollbar {
5502
+ ._sheet_1aeep_31::-webkit-scrollbar {
5480
5503
  display: none;
5481
5504
  }
5482
- @keyframes _menu-in_sz96n_1 {
5505
+ @keyframes _menu-in_1aeep_1 {
5483
5506
  from {
5484
5507
  opacity: 0;
5485
5508
  transform: translateY(-8px);
@@ -5490,16 +5513,16 @@
5490
5513
  }
5491
5514
  }
5492
5515
  @media (prefers-reduced-motion: reduce) {
5493
- ._sheet_sz96n_31 {
5516
+ ._sheet_1aeep_31 {
5494
5517
  animation: none;
5495
5518
  }
5496
5519
  }
5497
- ._header_sz96n_80 {
5520
+ ._header_1aeep_80 {
5498
5521
  display: flex;
5499
5522
  justify-content: flex-end;
5500
5523
  border-bottom: 1px solid rgba(249, 250, 250, 0.2);
5501
5524
  }
5502
- ._close_sz96n_86 {
5525
+ ._close_1aeep_86 {
5503
5526
  display: inline-flex;
5504
5527
  align-items: center;
5505
5528
  justify-content: center;
@@ -5511,19 +5534,19 @@
5511
5534
  color: inherit;
5512
5535
  cursor: pointer;
5513
5536
  }
5514
- ._close_sz96n_86:focus-visible {
5537
+ ._close_1aeep_86:focus-visible {
5515
5538
  outline: none;
5516
5539
  box-shadow: var(--focus-ring);
5517
5540
  border-radius: var(--radius-4);
5518
5541
  }
5519
- ._list_sz96n_105 {
5542
+ ._list_1aeep_105 {
5520
5543
  list-style: none;
5521
5544
  margin: 0;
5522
5545
  padding: var(--space-6) 0;
5523
5546
  display: flex;
5524
5547
  flex-direction: column;
5525
5548
  }
5526
- ._row_sz96n_120 {
5549
+ ._row_1aeep_120 {
5527
5550
  display: flex;
5528
5551
  align-items: center;
5529
5552
  gap: var(--space-8);
@@ -5536,39 +5559,39 @@
5536
5559
  text-align: left;
5537
5560
  cursor: pointer;
5538
5561
  }
5539
- ._row_sz96n_120[disabled] {
5562
+ ._row_1aeep_120[disabled] {
5540
5563
  cursor: default;
5541
5564
  }
5542
- ._row_sz96n_120:focus-visible {
5565
+ ._row_1aeep_120:focus-visible {
5543
5566
  outline: none;
5544
5567
  box-shadow: var(--focus-ring);
5545
5568
  }
5546
- ._icon_sz96n_149 {
5569
+ ._icon_1aeep_149 {
5547
5570
  display: inline-flex;
5548
5571
  flex: 0 0 24px;
5549
5572
  width: 24px;
5550
5573
  height: 24px;
5551
5574
  color: var(--color-text-default);
5552
5575
  }
5553
- ._text_sz96n_157 {
5576
+ ._text_1aeep_157 {
5554
5577
  display: flex;
5555
5578
  flex: 1 1 auto;
5556
5579
  flex-direction: column;
5557
5580
  gap: var(--space-2);
5558
5581
  min-width: 0;
5559
5582
  }
5560
- ._title_sz96n_165 {
5583
+ ._title_1aeep_165 {
5561
5584
  font-size: var(--type-paragraph-size);
5562
5585
  font-weight: var(--font-weight-bold);
5563
5586
  line-height: 1;
5564
5587
  color: var(--color-text-default);
5565
5588
  }
5566
- ._subtitle_sz96n_172 {
5589
+ ._subtitle_1aeep_172 {
5567
5590
  font-size: var(--type-trimmed-xs-size);
5568
5591
  line-height: 1.52;
5569
5592
  color: var(--color-text-subtle);
5570
5593
  }
5571
- ._chevron_sz96n_178 {
5594
+ ._chevron_1aeep_178 {
5572
5595
  display: inline-flex;
5573
5596
  flex: 0 0 16px;
5574
5597
  width: 16px;
@@ -5576,13 +5599,13 @@
5576
5599
  color: var(--color-text-subtle);
5577
5600
  }
5578
5601
  @media (min-width: 1200px) {
5579
- ._dropdown_sz96n_187 {
5602
+ ._dropdown_1aeep_187 {
5580
5603
  padding: 0;
5581
5604
  }
5582
- ._dropdown_sz96n_187 ._scrim_sz96n_21 {
5605
+ ._dropdown_1aeep_187 ._scrim_1aeep_21 {
5583
5606
  background: transparent;
5584
5607
  }
5585
- ._dropdown_sz96n_187 ._sheet_sz96n_31 {
5608
+ ._dropdown_1aeep_187 ._sheet_1aeep_31 {
5586
5609
  position: absolute;
5587
5610
  top: calc(var(--shop-chrome-top, 0px) + 64px);
5588
5611
  right: calc(max(176px, calc((100% - 1088px) / 2)) - 8px);
@@ -5593,15 +5616,21 @@
5593
5616
  background: #f9fafa;
5594
5617
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
5595
5618
  }
5596
- ._dropdown_sz96n_187 ._list_sz96n_105 li:not(:last-child) ._row_sz96n_120 {
5619
+ ._dropdown_1aeep_187 ._header_1aeep_80 {
5620
+ display: none;
5621
+ }
5622
+ ._dropdown_1aeep_187 ._row_1aeep_120 {
5623
+ min-height: 48px;
5624
+ }
5625
+ ._dropdown_1aeep_187 ._list_1aeep_105 li:not(:last-child) ._row_1aeep_120 {
5597
5626
  border-bottom: 1px solid #dddedf;
5598
5627
  }
5599
5628
  }
5600
- ._bar_z6nk8_1 {
5629
+ ._bar_10bv8_1 {
5601
5630
  display: none;
5602
5631
  }
5603
5632
  @media (min-width: 1200px) {
5604
- ._bar_z6nk8_1 {
5633
+ ._bar_10bv8_1 {
5605
5634
  position: sticky;
5606
5635
  top: var(--shop-chrome-top, 0px);
5607
5636
  z-index: 40;
@@ -5610,20 +5639,20 @@
5610
5639
  align-items: center;
5611
5640
  justify-content: space-between;
5612
5641
  width: 100%;
5613
- height: 64px;
5642
+ height: var(--shop-nav-height, 64px);
5614
5643
  padding: 0 max(176px, calc((100% - 1088px) / 2));
5615
5644
  font-family: var(--font-family-base);
5616
5645
  font-size: 16px;
5617
5646
  line-height: normal;
5618
5647
  }
5619
- ._media_z6nk8_22 {
5620
- margin-bottom: -64px;
5648
+ ._media_10bv8_22 {
5649
+ margin-bottom: calc(-1 * var(--shop-nav-height, 64px));
5621
5650
  background: rgba(8, 14, 18, 0.55);
5622
5651
  color: #f9fafa;
5623
5652
  --shop-nav-separator: rgba(249, 250, 250, 0.6);
5624
5653
  --shop-nav-trail: rgba(249, 250, 250, 0.7);
5625
5654
  }
5626
- ._light_z6nk8_30 {
5655
+ ._light_10bv8_30 {
5627
5656
  border-bottom: 1px solid rgba(8, 14, 18, 0.08);
5628
5657
  background: rgba(255, 255, 255, 0.85);
5629
5658
  -webkit-backdrop-filter: blur(12px);
@@ -5633,11 +5662,11 @@
5633
5662
  --shop-nav-trail: rgba(8, 14, 18, 0.7);
5634
5663
  }
5635
5664
  }
5636
- ._crumbs_z6nk8_41 {
5665
+ ._crumbs_10bv8_41 {
5637
5666
  min-width: 0;
5638
5667
  overflow: hidden;
5639
5668
  }
5640
- ._list_z6nk8_46 {
5669
+ ._list_10bv8_46 {
5641
5670
  display: flex;
5642
5671
  align-items: center;
5643
5672
  gap: 12px;
@@ -5646,41 +5675,41 @@
5646
5675
  list-style: none;
5647
5676
  white-space: nowrap;
5648
5677
  }
5649
- ._item_z6nk8_56 {
5678
+ ._item_10bv8_56 {
5650
5679
  display: flex;
5651
5680
  align-items: center;
5652
5681
  gap: 12px;
5653
5682
  min-width: 0;
5654
5683
  }
5655
- ._root_z6nk8_63,
5656
- ._trail_z6nk8_64,
5657
- ._current_z6nk8_65 {
5684
+ ._root_10bv8_63,
5685
+ ._trail_10bv8_64,
5686
+ ._current_10bv8_65 {
5658
5687
  color: inherit;
5659
5688
  text-decoration: none;
5660
5689
  }
5661
- ._root_z6nk8_63 {
5690
+ ._root_10bv8_63 {
5662
5691
  font-weight: var(--font-weight-bold);
5663
5692
  }
5664
- ._trail_z6nk8_64 {
5693
+ ._trail_10bv8_64 {
5665
5694
  font-weight: var(--font-weight-regular);
5666
5695
  color: var(--shop-nav-trail);
5667
5696
  }
5668
- ._current_z6nk8_65 {
5697
+ ._current_10bv8_65 {
5669
5698
  overflow: hidden;
5670
5699
  text-overflow: ellipsis;
5671
5700
  font-weight: var(--font-weight-regular);
5672
5701
  }
5673
- ._separator_z6nk8_85 {
5702
+ ._separator_10bv8_85 {
5674
5703
  font-weight: var(--font-weight-regular);
5675
5704
  color: var(--shop-nav-separator);
5676
5705
  }
5677
- ._actions_z6nk8_90 {
5706
+ ._actions_10bv8_90 {
5678
5707
  display: flex;
5679
5708
  flex-shrink: 0;
5680
5709
  align-items: center;
5681
5710
  gap: var(--space-16);
5682
5711
  }
5683
- ._iconBtn_z6nk8_97 {
5712
+ ._iconBtn_10bv8_97 {
5684
5713
  position: relative;
5685
5714
  display: inline-flex;
5686
5715
  align-items: center;
@@ -5694,19 +5723,19 @@
5694
5723
  cursor: pointer;
5695
5724
  text-decoration: none;
5696
5725
  }
5697
- ._iconBtn_z6nk8_97::after {
5726
+ ._iconBtn_10bv8_97::after {
5698
5727
  content: "";
5699
5728
  position: absolute;
5700
5729
  inset: -10px;
5701
5730
  }
5702
- ._iconBtn_z6nk8_97:focus-visible,
5703
- ._root_z6nk8_63:focus-visible,
5704
- ._trail_z6nk8_64:focus-visible {
5731
+ ._iconBtn_10bv8_97:focus-visible,
5732
+ ._root_10bv8_63:focus-visible,
5733
+ ._trail_10bv8_64:focus-visible {
5705
5734
  outline: 2px solid currentColor;
5706
5735
  outline-offset: 2px;
5707
5736
  border-radius: var(--radius-4);
5708
5737
  }
5709
- ._badge_z6nk8_126 {
5738
+ ._badge_10bv8_126 {
5710
5739
  position: absolute;
5711
5740
  top: -6px;
5712
5741
  left: 14px;