@sonic-equipment/ui 0.0.81 → 0.0.82

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.
Files changed (28) hide show
  1. package/dist/index.d.ts +18 -29
  2. package/dist/index.js +760 -657
  3. package/dist/src/buttons/button/button.d.ts +3 -4
  4. package/dist/src/buttons/button/button.stories.d.ts +1 -1
  5. package/dist/src/buttons/icon-button/icon-button.d.ts +2 -2
  6. package/dist/src/buttons/icon-button/icon-button.stories.d.ts +1 -1
  7. package/dist/src/buttons/link/link.d.ts +4 -9
  8. package/dist/src/buttons/link/link.stories.d.ts +1 -1
  9. package/dist/src/cards/product-card/{connected-product-cart.d.ts → connected-product-card.d.ts} +1 -2
  10. package/dist/src/cards/product-card/product-card.d.ts +4 -5
  11. package/dist/src/carousel/carousel-navigation-button.d.ts +5 -2
  12. package/dist/src/carousel/pagination/pagination.d.ts +14 -0
  13. package/dist/src/carousel/pagination/pagination.stories.d.ts +14 -0
  14. package/dist/src/carousel/pagination/transitions.d.ts +34 -0
  15. package/dist/src/carousel/usp-carousel/product-usp-carousel.d.ts +12 -0
  16. package/dist/src/carousel/usp-carousel/product-usp-carousel.stories.d.ts +27 -0
  17. package/dist/src/carousel/usp-carousel/usp-carousel.d.ts +2 -2
  18. package/dist/src/media/image-lightbox/image-lightbox.d.ts +8 -0
  19. package/dist/src/media/image-lightbox/image-lightbox.stories.d.ts +13 -0
  20. package/dist/src/modals/modal/modal.d.ts +3 -1
  21. package/dist/src/modals/modal/modal.stories.d.ts +11 -0
  22. package/dist/src/pages/product-details-page/components/product-details-images/product-detail-images.d.ts +6 -0
  23. package/dist/src/shared/hooks/use-resize-observer.d.ts +1 -1
  24. package/dist/src/shared/routing/route-link.d.ts +4 -2
  25. package/dist/styles.css +390 -154
  26. package/package.json +3 -3
  27. /package/dist/src/{usp/product-usp.d.ts → carousel/usp-carousel/product-usp-carousel-slide.d.ts} +0 -0
  28. /package/dist/src/pages/product-details-page/components/{product-details-panel.d.ts → product-details-panel/product-details-panel.d.ts} +0 -0
package/dist/styles.css CHANGED
@@ -226,6 +226,7 @@
226
226
  --search-input-height: 76px;
227
227
  }
228
228
 
229
+ /* stylelint-disable no-descending-specificity */
229
230
  .link-module-xLqBn {
230
231
  all: unset;
231
232
  position: relative;
@@ -234,52 +235,43 @@
234
235
  cursor: pointer;
235
236
  font: inherit;
236
237
  gap: var(--space-4);
238
+ -webkit-tap-highlight-color: transparent;
237
239
  }
238
-
239
- .link-module-xLqBn > svg {
240
+ .link-module-xLqBn > svg {
240
241
  display: block;
241
242
  width: 12px;
242
243
  height: 12px;
243
244
  }
244
-
245
- .link-module-xLqBn:where(.link-module-bGD6u) {
246
- color: var(--color-black);
245
+ .link-module-xLqBn:where([data-disabled]) {
246
+ cursor: default;
247
+ opacity: 0.4;
247
248
  }
248
-
249
- .link-module-xLqBn:where(.link-module-bGD6u)[data-pressed],
250
- .link-module-xLqBn:where(.link-module-bGD6u)[data-hovered] {
251
- color: var(--color-brand-red);
249
+ .link-module-xLqBn:where(.link-module-UuCEp) {
250
+ text-decoration: underline;
251
+ }
252
+ .link-module-xLqBn:where(.link-module-UuCEp)::after {
253
+ display: none;
252
254
  }
253
-
254
- .link-module-xLqBn:where(.link-module-bGD6u)[data-pressed]::after, .link-module-xLqBn:where(.link-module-bGD6u)[data-hovered]::after {
255
- background-color: var(--color-brand-red);
256
- }
257
-
258
- .link-module-xLqBn:where(.link-module-v31wH) {
255
+ .link-module-xLqBn:where(.link-module-v31wH) {
259
256
  color: var(--color-brand-red);
260
257
  }
261
-
262
- .link-module-xLqBn:where(.link-module-v31wH)[data-pressed],
263
- .link-module-xLqBn:where(.link-module-v31wH)[data-hovered] {
258
+ .link-module-xLqBn:where(.link-module-v31wH):where(:not([data-disabled]):focus),
259
+ .link-module-xLqBn:where(.link-module-v31wH):where(:not([data-disabled]):hover) {
264
260
  color: var(--color-brand-dark-red);
265
261
  }
266
-
267
- .link-module-xLqBn:where(.link-module-v31wH)[data-pressed]::after, .link-module-xLqBn:where(.link-module-v31wH)[data-hovered]::after {
262
+ .link-module-xLqBn:where(.link-module-v31wH):where(:not([data-disabled]):focus)::after, .link-module-xLqBn:where(.link-module-v31wH):where(:not([data-disabled]):hover)::after {
268
263
  background-color: var(--color-brand-dark-red);
269
264
  }
270
-
271
- .link-module-xLqBn:where([data-disabled]) {
272
- cursor: default;
273
- opacity: 0.4;
274
- }
275
-
276
- .link-module-xLqBn:where(.link-module-UuCEp) {
277
- text-decoration: underline;
265
+ .link-module-xLqBn:where(.link-module-bGD6u) {
266
+ color: var(--color-black);
278
267
  }
279
-
280
- .link-module-xLqBn:where(.link-module-UuCEp)::after {
281
- display: none;
268
+ .link-module-xLqBn:where(.link-module-bGD6u):where(.link-module-xLqBn:where(.link-module-bGD6u):not([data-disabled]):focus),
269
+ .link-module-xLqBn:where(.link-module-bGD6u):where(.link-module-xLqBn:where(.link-module-bGD6u):not([data-disabled]):hover) {
270
+ color: var(--color-brand-red);
282
271
  }
272
+ .link-module-xLqBn:where(.link-module-bGD6u):where(.link-module-xLqBn:where(.link-module-bGD6u):not([data-disabled]):focus)::after, .link-module-xLqBn:where(.link-module-bGD6u):where(.link-module-xLqBn:where(.link-module-bGD6u):not([data-disabled]):hover)::after {
273
+ background-color: var(--color-brand-red);
274
+ }
283
275
 
284
276
  .button-module-V4meK {
285
277
  all: unset;
@@ -357,7 +349,7 @@
357
349
  color: var(--color-brand-white);
358
350
  }
359
351
 
360
- .button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where([data-focused], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where([data-pressed]) {
352
+ .button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where(:focus, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where(:hover, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj) {
361
353
  background-color: var(--color-brand-dark-red);
362
354
  }
363
355
 
@@ -365,7 +357,7 @@
365
357
  color: var(--color-brand-black);
366
358
  }
367
359
 
368
- .button-module-tmyk8:where(.button-module-f4UVe):where([data-focused], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-f4UVe):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-f4UVe):where([data-pressed]) {
360
+ .button-module-tmyk8:where(.button-module-f4UVe):where(:focus, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-f4UVe):where(:hover, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj) {
369
361
  color: var(--color-brand-red);
370
362
  }
371
363
 
@@ -389,7 +381,7 @@
389
381
  color: var(--color-brand-black);
390
382
  }
391
383
 
392
- .button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where([data-focused], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where([data-pressed]) {
384
+ .button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where(:focus, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where(:hover, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj) {
393
385
  background-color: var(--color-brand-light-gray);
394
386
  }
395
387
 
@@ -397,7 +389,7 @@
397
389
  color: var(--color-brand-black);
398
390
  }
399
391
 
400
- .button-module--1bCH:where(.button-module-f4UVe):where([data-focused], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-f4UVe):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-f4UVe):where([data-pressed]) {
392
+ .button-module--1bCH:where(.button-module-f4UVe):where(:focus, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-f4UVe):where(:hover, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj) {
401
393
  color: var(--color-brand-red);
402
394
  }
403
395
 
@@ -405,7 +397,7 @@
405
397
  border: 1px solid var(--color-brand-medium-gray);
406
398
  }
407
399
 
408
- .button-module--1bCH:where(.button-module-vq9GI):where([data-focused], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI):where([data-pressed]) {
400
+ .button-module--1bCH:where(.button-module-vq9GI):where(:focus, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI):where(:hover, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj) {
409
401
  border-color: var(--color-brand-light-gray);
410
402
  }
411
403
 
@@ -452,10 +444,10 @@
452
444
  box-shadow: var(--shadow-focus-outline);
453
445
  outline: none;
454
446
  }
455
- .breadcrumb-module-CQGse .breadcrumb-module-hxhDY .breadcrumb-module-fp2Q6[aria-disabled] {
447
+ .breadcrumb-module-CQGse .breadcrumb-module-hxhDY .breadcrumb-module-fp2Q6[data-disabled] {
456
448
  cursor: default;
457
449
  }
458
- .breadcrumb-module-CQGse .breadcrumb-module-hxhDY .breadcrumb-module-fp2Q6:not([aria-disabled]):hover {
450
+ .breadcrumb-module-CQGse .breadcrumb-module-hxhDY .breadcrumb-module-fp2Q6:not([data-disabled]):hover {
459
451
  color: var(--color-brand-red);
460
452
  }
461
453
  /* stylelint-disable-next-line no-descending-specificity */
@@ -495,6 +487,8 @@
495
487
  min-height: 48px;
496
488
  align-items: center;
497
489
  justify-content: center;
490
+ border: none;
491
+ background-color: transparent;
498
492
  cursor: pointer;
499
493
  -webkit-tap-highlight-color: transparent;
500
494
  }
@@ -868,8 +862,8 @@
868
862
 
869
863
  .image-module-lg7Kj {
870
864
  display: block;
871
- max-width: 100%;
872
- max-height: 100%;
865
+ width: 100%;
866
+ height: 100%;
873
867
  }
874
868
 
875
869
  .image-module-lg7Kj:where(.image-module-KFEgG) {
@@ -892,8 +886,8 @@
892
886
 
893
887
  .image-module-pNYjR {
894
888
  display: block;
895
- max-width: 100%;
896
- max-height: 100%;
889
+ width: 100%;
890
+ height: 100%;
897
891
  }
898
892
 
899
893
  .product-card-module-LepTy {
@@ -1323,6 +1317,34 @@
1323
1317
 
1324
1318
  /* Slide styles end */
1325
1319
 
1320
+ .carousel-navigation-button-module-a1-I4 {
1321
+ width: 44px;
1322
+ height: 44px;
1323
+ border: 1px solid currentcolor;
1324
+ border-radius: 100%;
1325
+ background-color: var(--color-brand-white);
1326
+ color: var(--color-brand-medium-gray);
1327
+ cursor: pointer;
1328
+ outline: none;
1329
+ -webkit-tap-highlight-color: transparent;
1330
+ transition: background-color 0.2s ease;
1331
+ }
1332
+
1333
+ .carousel-navigation-button-module-a1-I4[data-hovered] {
1334
+ background-color: var(--color-brand-light-gray);
1335
+ }
1336
+
1337
+ .carousel-navigation-button-module-a1-I4[data-disabled],
1338
+ .carousel-navigation-button-module-a1-I4.swiper-button-disabled {
1339
+ color: #bcbcbc66;
1340
+ cursor: default;
1341
+ pointer-events: none;
1342
+ }
1343
+
1344
+ .carousel-navigation-button-module-a1-I4.swiper-button-lock {
1345
+ display: none;
1346
+ }
1347
+
1326
1348
  .carousel-module-ealh- {
1327
1349
  position: relative;
1328
1350
  display: block;
@@ -1389,19 +1411,11 @@
1389
1411
  width: fit-content;
1390
1412
  }
1391
1413
 
1392
- .carousel-module-ealh- .carousel-module-kcqEE {
1393
- -webkit-tap-highlight-color: transparent;
1394
- }
1395
-
1396
- .carousel-module-ealh- .carousel-module-kcqEE.carousel-module-uCrOA {
1397
- display: none;
1398
- }
1399
-
1400
1414
  /* stylelint-disable-next-line no-descending-specificity */
1401
1415
 
1402
1416
  /* stylelint-disable-next-line no-descending-specificity */
1403
1417
 
1404
- .carousel-module-ealh-:has(.carousel-module-T7bTr .carousel-module-kcqEE:hover) .carousel-module-IftbN::after, .carousel-module-ealh-:has(.carousel-module-34OWD) .carousel-module-IftbN::after {
1418
+ .carousel-module-ealh-:has(.carousel-module-T7bTr:hover) .carousel-module-IftbN::after, .carousel-module-ealh-:has(.carousel-module-34OWD) .carousel-module-IftbN::after {
1405
1419
  opacity: 0;
1406
1420
  }
1407
1421
 
@@ -1409,51 +1423,30 @@
1409
1423
 
1410
1424
  /* stylelint-disable-next-line no-descending-specificity */
1411
1425
 
1412
- .carousel-module-ealh-:has(.carousel-module-984Rr .carousel-module-kcqEE:hover) .carousel-module-IftbN::before, .carousel-module-ealh-:has(.carousel-module-34OWD) .carousel-module-IftbN::before {
1426
+ .carousel-module-ealh-:has(.carousel-module-984Rr:hover) .carousel-module-IftbN::before, .carousel-module-ealh-:has(.carousel-module-34OWD) .carousel-module-IftbN::before {
1413
1427
  opacity: 0;
1414
1428
  }
1415
1429
 
1416
- .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z {
1430
+ .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-kcqEE {
1417
1431
  position: absolute;
1418
1432
  z-index: var(--carousel-layer);
1419
1433
  }
1420
1434
 
1421
- .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z.carousel-module-984Rr {
1435
+ .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-kcqEE.carousel-module-984Rr {
1422
1436
  left: 0;
1423
1437
  transform: translate(-50%, 0);
1424
1438
  }
1425
1439
 
1426
- .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z.carousel-module-T7bTr {
1440
+ .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-kcqEE.carousel-module-T7bTr {
1427
1441
  right: 0;
1428
1442
  transform: translate(50%, 0);
1429
1443
  }
1430
1444
 
1431
- .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z .carousel-module-kcqEE {
1432
- width: 44px;
1433
- height: 44px;
1434
- border: 1px solid currentcolor;
1435
- border-radius: 100%;
1436
- background-color: var(--color-brand-white);
1437
- color: var(--color-brand-medium-gray);
1438
- cursor: pointer;
1439
- outline: none;
1440
- transition: background-color 0.2s ease;
1441
- }
1442
-
1443
- .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z .carousel-module-kcqEE[data-hovered] {
1444
- background-color: var(--color-brand-light-gray);
1445
- }
1446
-
1447
- .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z .carousel-module-kcqEE[data-disabled] {
1448
- color: #bcbcbc66;
1449
- cursor: default;
1450
- }
1451
-
1452
- .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-nL-O8 .carousel-module-Hi-0z {
1445
+ .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-nL-O8 .carousel-module-kcqEE {
1453
1446
  top: var(--space-24);
1454
1447
  }
1455
1448
 
1456
- .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-5SGYn .carousel-module-Hi-0z {
1449
+ .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-5SGYn .carousel-module-kcqEE {
1457
1450
  top: 50%;
1458
1451
  }
1459
1452
 
@@ -1463,7 +1456,7 @@
1463
1456
  margin-left: -10px;
1464
1457
  }
1465
1458
 
1466
- .carousel-module-ealh- .carousel-module-Hi-0z {
1459
+ .carousel-module-ealh- .carousel-module-kcqEE {
1467
1460
  display: none;
1468
1461
  }
1469
1462
  }
@@ -2248,8 +2241,12 @@
2248
2241
  animation: modal-module-63Uyl 150ms reverse ease-in;
2249
2242
  }
2250
2243
 
2244
+ .modal-module-rVFJc:has(.modal-module-uwets) {
2245
+ display: contents;
2246
+ }
2247
+
2251
2248
  .modal-module-6vlFt {
2252
- position: relative;
2249
+ position: absolute;
2253
2250
  z-index: calc(var(--modal-layer) - 1);
2254
2251
  min-width: 300px;
2255
2252
  max-width: 90%;
@@ -2270,6 +2267,32 @@
2270
2267
  animation: modal-module-aPJ7X 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
2271
2268
  }
2272
2269
 
2270
+ .modal-module-6vlFt .modal-module-7c3-9 {
2271
+ width: 100%;
2272
+ height: 100%;
2273
+ }
2274
+
2275
+ .modal-module-6vlFt:where(.modal-module-uwets) {
2276
+ position: fixed;
2277
+ max-width: 100%;
2278
+ border-radius: 0;
2279
+ inset: 0;
2280
+ }
2281
+
2282
+ .modal-module-6vlFt:where(.modal-module-uwets)[data-entering] {
2283
+ animation: modal-module-63Uyl 300ms;
2284
+ }
2285
+
2286
+ .modal-module-6vlFt:where(.modal-module-uwets)[data-exiting] {
2287
+ animation: modal-module-63Uyl 300ms reverse;
2288
+ }
2289
+
2290
+ .modal-module-6vlFt .modal-module-7zIZE {
2291
+ position: absolute;
2292
+ top: 0;
2293
+ right: 0;
2294
+ }
2295
+
2273
2296
  @keyframes modal-module-63Uyl {
2274
2297
  from {
2275
2298
  opacity: 0;
@@ -2410,6 +2433,93 @@
2410
2433
  }
2411
2434
  }
2412
2435
 
2436
+ .pagination-module-pQ-Pu .pagination-module-EnswA {
2437
+ position: relative;
2438
+ display: flex;
2439
+ align-items: center;
2440
+ justify-content: center;
2441
+ }
2442
+ .pagination-module-pQ-Pu.pagination-module-4U0M3 {
2443
+ padding: var(--space-4);
2444
+ border-radius: 20px;
2445
+ background-color: rgb(127 127 127 / 50%);
2446
+ }
2447
+
2448
+ .pagination-module-E-D6l {
2449
+ display: flex;
2450
+ width: var(--space-16);
2451
+ height: var(--space-16);
2452
+ align-items: center;
2453
+ justify-content: center;
2454
+ cursor: pointer;
2455
+ }
2456
+
2457
+ .pagination-module-E-D6l::before {
2458
+ display: block;
2459
+ width: 5px;
2460
+ height: 5px;
2461
+ box-sizing: border-box;
2462
+ padding: 0;
2463
+ border-radius: 50%;
2464
+ margin: 0;
2465
+ background-color: var(--color-brand-black);
2466
+ content: '';
2467
+ opacity: 1;
2468
+ text-indent: -9999px;
2469
+ transition: opacity 0.2s linear;
2470
+ }
2471
+
2472
+ .pagination-module-4U0M3 .pagination-module-E-D6l::before {
2473
+ background-color: var(--color-brand-white);
2474
+ }
2475
+
2476
+ .pagination-module-E-D6l.active::before {
2477
+ opacity: 0;
2478
+ }
2479
+
2480
+ .pagination-module-E-D6l:hover::before {
2481
+ background-color: var(--color-brand-red);
2482
+ }
2483
+
2484
+ .pagination-module-rNIvD {
2485
+ position: absolute;
2486
+ left: 0;
2487
+ width: var(--space-16);
2488
+ height: var(--space-16);
2489
+ pointer-events: none;
2490
+ transition: transform 0.2s linear;
2491
+ -webkit-user-select: none;
2492
+ -moz-user-select: none;
2493
+ user-select: none;
2494
+ }
2495
+
2496
+ .pagination-module-rNIvD::before {
2497
+ all: unset;
2498
+ }
2499
+
2500
+ .pagination-module-rNIvD .pagination-module-4--ee {
2501
+ display: block;
2502
+ width: var(--size);
2503
+ height: var(--size);
2504
+ box-sizing: border-box;
2505
+ padding: 0;
2506
+ border: 2px solid var(--color-brand-red);
2507
+ border-radius: 50%;
2508
+ margin: 0;
2509
+ background-color: transparent;
2510
+ content: '';
2511
+ text-indent: -9999px;
2512
+ transition:
2513
+ width 0.2s linear,
2514
+ height 0.2s linear;
2515
+
2516
+ --size: 1px;
2517
+ }
2518
+
2519
+ .pagination-module-4U0M3 .pagination-module-rNIvD .pagination-module-4--ee {
2520
+ border-color: var(--color-brand-white);
2521
+ }
2522
+
2413
2523
  :root {
2414
2524
  /*
2415
2525
  --swiper-pagination-color: var(--swiper-theme-color);
@@ -2674,8 +2784,6 @@ button.swiper-pagination-bullet {
2674
2784
  .usp-carousel-module-UCbpX .usp-carousel-module-rtIrb .usp-carousel-module-2fygw .usp-carousel-module-AOJJg .usp-carousel-module--xcF2 {
2675
2785
  margin-top: 0;
2676
2786
  margin-bottom: var(--space-24);
2677
- font-size: var(--header-font-size);
2678
- font-weight: var(--font-weight-bold);
2679
2787
  line-height: 1;
2680
2788
  }
2681
2789
 
@@ -2719,16 +2827,94 @@ button.swiper-pagination-bullet {
2719
2827
  }
2720
2828
  }
2721
2829
 
2830
+ .product-details-page-layout-module-IQFIn {
2831
+ display: flex;
2832
+ flex-direction: column;
2833
+ padding-top: var(--space-24);
2834
+ margin-bottom: var(--space-64);
2835
+ gap: var(--space-64);
2836
+ }
2837
+
2838
+ .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp .product-details-page-layout-module-Efavu {
2839
+ height: 100%;
2840
+ align-self: flex-start;
2841
+ margin-bottom: var(--space-16);
2842
+ }
2843
+
2844
+ .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp .product-details-page-layout-module-Y2490 {
2845
+ position: sticky;
2846
+ top: 0;
2847
+ height: -moz-fit-content;
2848
+ height: fit-content;
2849
+ }
2850
+
2851
+ .product-details-page-layout-module-IQFIn .product-details-page-layout-module-EDW8t,
2852
+ .product-details-page-layout-module-IQFIn .product-details-page-layout-module-GSMls {
2853
+ display: flex;
2854
+ flex-direction: column;
2855
+ align-items: center;
2856
+ gap: var(--space-24);
2857
+ }
2858
+
2859
+ .product-details-page-layout-module-IQFIn .product-details-page-layout-module-duq6v {
2860
+ position: relative;
2861
+ left: -10px;
2862
+ width: 100dvw;
2863
+ }
2864
+
2865
+ @media (width >= 768px) {
2866
+ .product-details-page-layout-module-IQFIn .product-details-page-layout-module-duq6v {
2867
+ position: relative;
2868
+ left: auto;
2869
+ width: auto;
2870
+ }
2871
+ }
2872
+
2873
+ @media (width >= 1024px) {
2874
+ .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp {
2875
+ display: grid;
2876
+ gap: var(--space-24);
2877
+ grid-template-columns: 396px 1fr;
2878
+ }
2879
+
2880
+ .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp .product-details-page-layout-module-Efavu {
2881
+ margin-bottom: 0;
2882
+ }
2883
+ }
2884
+
2885
+ @media (width >= 1440px) {
2886
+ .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp {
2887
+ gap: var(--space-32);
2888
+ grid-template-columns: 600px 1fr;
2889
+ }
2890
+ }
2891
+
2892
+ .blank-page-spacer-module-lXxle {
2893
+ --header-height: var(--header-height-mobile);
2894
+
2895
+ display: grid;
2896
+ width: 100%;
2897
+ height: calc(100dvh - var(--header-height));
2898
+ background-color: var(--color-white);
2899
+ place-items: center;
2900
+ }
2901
+
2902
+ @media (width >= 1024px) {
2903
+ .blank-page-spacer-module-hbxDP {
2904
+ --header-height: var(--header-height-desktop);
2905
+ }
2906
+ }
2907
+
2722
2908
  .images-grid-module-i5868 {
2723
2909
  display: grid;
2724
2910
  gap: var(--space-12);
2725
2911
  grid-template-columns: repeat(2, 1fr);
2726
- grid-template-rows: repeat(4, 1fr);
2727
2912
  }
2728
2913
 
2729
2914
  .images-grid-module-i5868 .images-grid-module-nY9-n {
2730
2915
  display: flex;
2731
- aspect-ratio: 1;
2916
+ width: 100%;
2917
+ aspect-ratio: 1 / 1;
2732
2918
  background-color: var(--color-gray-100);
2733
2919
  outline: none;
2734
2920
  }
@@ -2776,82 +2962,125 @@ button.swiper-pagination-bullet {
2776
2962
  }
2777
2963
  }
2778
2964
 
2779
- .product-details-page-layout-module-IQFIn {
2780
- display: flex;
2781
- flex-direction: column;
2782
- padding-top: var(--space-24);
2783
- margin-bottom: var(--space-64);
2784
- gap: var(--space-64);
2965
+ .image-lightbox-module-9k3oJ {
2966
+ --thumb-size: 80px;
2967
+
2968
+ width: 100%;
2969
+ gap: var(--space-16);
2785
2970
  }
2786
2971
 
2787
- .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp {
2788
- display: grid;
2789
- gap: var(--space-16);
2790
- grid-template-columns: 1fr;
2972
+ .image-lightbox-module-9k3oJ,
2973
+ .image-lightbox-module-9k3oJ * {
2974
+ box-sizing: border-box;
2791
2975
  }
2792
2976
 
2793
- .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp .product-details-page-layout-module-Efavu {
2794
- height: 100%;
2795
- align-self: flex-start;
2977
+ .image-lightbox-module-9k3oJ .swiper {
2978
+ margin: 0;
2796
2979
  }
2797
2980
 
2798
- .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp .product-details-page-layout-module-Y2490 {
2799
- position: sticky;
2800
- top: 0;
2801
- height: -moz-fit-content;
2802
- height: fit-content;
2803
- }
2981
+ .image-lightbox-module-9k3oJ .image-lightbox-module-K5Gd0 {
2982
+ width: auto;
2983
+ }
2804
2984
 
2805
- .product-details-page-layout-module-IQFIn .product-details-page-layout-module-EDW8t,
2806
- .product-details-page-layout-module-IQFIn .product-details-page-layout-module-GSMls {
2985
+ .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi,
2986
+ .image-lightbox-module-9k3oJ .image-lightbox-module-PUOMT {
2807
2987
  display: flex;
2808
- flex-direction: column;
2809
- align-items: center;
2810
- gap: var(--space-24);
2988
+ background-color: var(--color-brand-light-gray);
2811
2989
  }
2812
2990
 
2813
- .product-details-page-layout-module-IQFIn .product-details-page-layout-module-duq6v {
2814
- position: relative;
2815
- left: -10px;
2816
- width: 100dvw;
2991
+ .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi .image-lightbox-module-4RKLg, .image-lightbox-module-9k3oJ .image-lightbox-module-PUOMT .image-lightbox-module-4RKLg {
2992
+ mix-blend-mode: multiply;
2993
+ }
2994
+
2995
+ .image-lightbox-module-9k3oJ .image-lightbox-module-UNPOi {
2996
+ width: 100%;
2997
+ aspect-ratio: 1;
2817
2998
  }
2818
2999
 
2819
- @media (width >= 768px) {
2820
- .product-details-page-layout-module-IQFIn .product-details-page-layout-module-duq6v {
2821
- position: relative;
2822
- left: auto;
2823
- width: auto;
2824
- }
3000
+ .image-lightbox-module-9k3oJ .image-lightbox-module-PUOMT {
3001
+ width: var(--thumb-size);
3002
+ height: var(--thumb-size);
3003
+ border: 2px solid transparent;
3004
+ margin: auto;
3005
+ cursor: pointer;
3006
+ transition: border-color 0.2s ease;
2825
3007
  }
2826
3008
 
2827
- @media (width >= 1024px) {
2828
- .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp {
2829
- gap: var(--space-24);
2830
- grid-template-columns: 396px 1fr;
3009
+ .image-lightbox-module-9k3oJ .swiper-slide-thumb-active .image-lightbox-module-PUOMT {
3010
+ border: 2px solid var(--color-brand-red);
3011
+ cursor: default;
2831
3012
  }
3013
+
3014
+ .image-lightbox-module-9k3oJ .image-lightbox-module-hAy3O {
3015
+ position: relative;
2832
3016
  }
2833
3017
 
2834
- @media (width >= 1440px) {
2835
- .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp {
2836
- gap: var(--space-32);
2837
- grid-template-columns: 600px 1fr;
2838
- }
3018
+ .image-lightbox-module-9k3oJ .image-lightbox-module-nN1Kr {
3019
+ position: absolute;
3020
+ z-index: 1;
3021
+ bottom: 20px;
3022
+ left: 50%;
3023
+ width: -moz-fit-content;
3024
+ width: fit-content;
3025
+ transform: translateX(-50%);
2839
3026
  }
2840
3027
 
2841
- .blank-page-spacer-module-lXxle {
2842
- --header-height: var(--header-height-mobile);
3028
+ .image-lightbox-module-9k3oJ:where(.image-lightbox-module-1idAN) {
3029
+ display: flex;
3030
+ flex-direction: column-reverse;
3031
+ }
2843
3032
 
2844
- display: grid;
2845
- width: 100%;
2846
- height: calc(100dvh - var(--header-height));
2847
- background-color: var(--color-white);
2848
- place-items: center;
2849
- }
3033
+ .image-lightbox-module-9k3oJ:where(.image-lightbox-module-1idAN) .image-lightbox-module-Xbxcn {
3034
+ padding-inline: var(--space-16);
3035
+ }
2850
3036
 
2851
- @media (width >= 1024px) {
2852
- .blank-page-spacer-module-hbxDP {
2853
- --header-height: var(--header-height-desktop);
3037
+ .image-lightbox-module-9k3oJ:where(.image-lightbox-module--V8Xo) {
3038
+ display: grid;
3039
+ grid-template-columns: var(--thumb-size) 1fr var(--thumb-size);
2854
3040
  }
3041
+
3042
+ .image-lightbox-module-9k3oJ:where(.image-lightbox-module--V8Xo) .image-lightbox-module-hAy3O {
3043
+ max-width: 640px;
3044
+ justify-self: center;
3045
+ }
3046
+
3047
+ .image-lightbox-module-9k3oJ:where(.image-lightbox-module--V8Xo) .image-lightbox-module-Xbxcn {
3048
+ align-self: center;
3049
+ }
3050
+
3051
+ .image-lightbox-module-9k3oJ:where(.image-lightbox-module--V8Xo) .image-lightbox-module-K5Gd0 {
3052
+ height: auto;
3053
+ }
3054
+
3055
+ .image-lightbox-module-9k3oJ:where(.image-lightbox-module--V8Xo) .image-lightbox-module-RP7KS {
3056
+ position: absolute;
3057
+ z-index: var(--carousel-layer);
3058
+ top: 50%;
3059
+ transform: translateY(-50%);
3060
+ }
3061
+
3062
+ .image-lightbox-module-9k3oJ:where(.image-lightbox-module--V8Xo) .image-lightbox-module-RP7KS.image-lightbox-module-wOPYF {
3063
+ left: -22px;
3064
+ }
3065
+
3066
+ .image-lightbox-module-9k3oJ:where(.image-lightbox-module--V8Xo) .image-lightbox-module-RP7KS.image-lightbox-module-knizp {
3067
+ right: -22px;
3068
+ }
3069
+
3070
+ @media (width >= 1440px) {
3071
+ .image-lightbox-module-9k3oJ:where(.image-lightbox-module--V8Xo) .image-lightbox-module-hAy3O {
3072
+ max-width: 768px;
3073
+ }
3074
+ }
3075
+
3076
+ .product-detail-images-module-N3Ms- {
3077
+ display: flex;
3078
+ width: 100%;
3079
+ height: 100%;
3080
+ box-sizing: border-box;
3081
+ align-items: center;
3082
+ justify-content: center;
3083
+ padding: 64px 48px;
2855
3084
  }
2856
3085
 
2857
3086
  .feature-list-module-cxc8U {
@@ -2926,35 +3155,32 @@ button.swiper-pagination-bullet {
2926
3155
  height: 20px;
2927
3156
  }
2928
3157
 
2929
- .product-details-panel-module-qO4Hi {
3158
+ .product-details-panel-module-kfhpL {
2930
3159
  display: flex;
2931
3160
  flex-direction: column;
2932
3161
  gap: 24px;
2933
3162
  }
2934
3163
 
2935
- .product-details-panel-module-qO4Hi .product-details-panel-module-s42w- {
3164
+ .product-details-panel-module-kfhpL .product-details-panel-module--1ODE {
2936
3165
  display: flex;
2937
3166
  flex-direction: column;
2938
3167
  gap: 8px;
2939
3168
  }
2940
3169
 
2941
- .product-details-panel-module-qO4Hi .product-details-panel-module-Fa6vy {
2942
- padding-bottom: var(--space-12);
2943
- }
2944
-
2945
- .product-details-panel-module-qO4Hi .product-details-panel-module-5AUJ4 {
3170
+ .product-details-panel-module-kfhpL .product-details-panel-module-CCcmA {
2946
3171
  display: flex;
2947
3172
  width: 100%;
2948
3173
  align-items: flex-end;
2949
3174
  justify-content: space-between;
2950
3175
  }
2951
3176
 
2952
- .product-details-panel-module-qO4Hi .product-details-panel-module-5AUJ4 .product-details-panel-module-IZCrY {
3177
+ .product-details-panel-module-kfhpL .product-details-panel-module-CCcmA .product-details-panel-module-1vyDM {
2953
3178
  display: flex;
2954
3179
  align-items: center;
2955
3180
  }
2956
3181
 
2957
- .product-details-panel-module-qO4Hi .product-details-panel-module-BqSmY {
3182
+ .product-details-panel-module-kfhpL .product-details-panel-module-GfTab {
3183
+ margin-top: var(--space-12);
2958
3184
  color: var(--color-brand-dark-gray);
2959
3185
  font-size: 16px;
2960
3186
  font-stretch: normal;
@@ -2964,11 +3190,11 @@ button.swiper-pagination-bullet {
2964
3190
  line-height: 1.5;
2965
3191
  }
2966
3192
 
2967
- .product-details-panel-module-qO4Hi .product-details-panel-module-BqSmY p {
3193
+ .product-details-panel-module-kfhpL .product-details-panel-module-GfTab p {
2968
3194
  margin: 0;
2969
3195
  }
2970
3196
 
2971
- .product-details-panel-module-qO4Hi .product-details-panel-module-J060x {
3197
+ .product-details-panel-module-kfhpL .product-details-panel-module-ze0my {
2972
3198
  margin-top: var(--space-16);
2973
3199
  margin-bottom: var(--space-24);
2974
3200
  }
@@ -3133,6 +3359,7 @@ button.swiper-pagination-bullet {
3133
3359
  }
3134
3360
 
3135
3361
  & .promo-card-module-e2oii {
3362
+ position: relative;
3136
3363
  display: block;
3137
3364
  height: 122px;
3138
3365
  outline: none;
@@ -3154,8 +3381,17 @@ button.swiper-pagination-bullet {
3154
3381
  width: 100%;
3155
3382
  }
3156
3383
 
3157
- & .promo-card-module-e2oii[data-focus-visible] {
3158
- box-shadow: var(--shadow-focus-outline);
3384
+ & .promo-card-module-e2oii:focus-visible::after {
3385
+ position: absolute;
3386
+ display: block;
3387
+ background-color: transparent;
3388
+ box-shadow: var(--shadow-focus-outline) inset;
3389
+ content: '';
3390
+ inset: 0;
3391
+ pointer-events: none;
3392
+ -webkit-user-select: none;
3393
+ -moz-user-select: none;
3394
+ user-select: none;
3159
3395
  }
3160
3396
 
3161
3397
  @media (width >= 768px) {
@@ -3332,15 +3568,15 @@ button.swiper-pagination-bullet {
3332
3568
  color: var(--color-brand-red);
3333
3569
  }
3334
3570
 
3335
- .category-card-module-4NUjH[data-pressed] .category-card-module-RxWMW, .category-card-module-4NUjH[data-hovered] .category-card-module-RxWMW, .category-card-module-4NUjH[data-focused] .category-card-module-RxWMW {
3571
+ .category-card-module-4NUjH:hover .category-card-module-RxWMW, .category-card-module-4NUjH:focus .category-card-module-RxWMW {
3336
3572
  scale: 1.15;
3337
3573
  }
3338
3574
 
3339
- .category-card-module-4NUjH[data-pressed] .category-card-module-LEhh3, .category-card-module-4NUjH[data-hovered] .category-card-module-LEhh3, .category-card-module-4NUjH[data-focused] .category-card-module-LEhh3 {
3575
+ .category-card-module-4NUjH:hover .category-card-module-LEhh3, .category-card-module-4NUjH:focus .category-card-module-LEhh3 {
3340
3576
  color: var(--color-brand-red);
3341
3577
  }
3342
3578
 
3343
- .category-card-module-4NUjH[data-pressed] .category-card-module-LEhh3, .category-card-module-4NUjH[data-hovered] .category-card-module-LEhh3, .category-card-module-4NUjH[data-focused] .category-card-module-LEhh3, .category-card-module-4NUjH.category-card-module-vJ7vB .category-card-module-LEhh3 {
3579
+ .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 {
3344
3580
  color: var(--color-brand-red);
3345
3581
  }
3346
3582