@nok-integration/storefront-react 0.22.1 → 0.22.3

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.
package/dist/styles.css CHANGED
@@ -654,12 +654,12 @@
654
654
  color: var(--color-text-disabled);
655
655
  white-space: nowrap;
656
656
  }
657
- ._summary_1hsxt_2 {
657
+ ._summary_1k2h8_2 {
658
658
  margin: 0;
659
659
  display: flex;
660
660
  flex-direction: column;
661
661
  }
662
- ._row_1hsxt_16 {
662
+ ._row_1k2h8_16 {
663
663
  box-sizing: border-box;
664
664
  display: flex;
665
665
  align-items: center;
@@ -671,32 +671,41 @@
671
671
  font-weight: var(--font-weight-bold);
672
672
  color: var(--color-text-default);
673
673
  }
674
- ._row_1hsxt_16 + ._row_1hsxt_16 {
674
+ ._row_1k2h8_16 + ._row_1k2h8_16 {
675
675
  box-shadow: inset 0 1px 0 var(--color-border-default);
676
676
  }
677
- ._row_1hsxt_16 dt,
678
- ._row_1hsxt_16 dd {
677
+ ._row_1k2h8_16 dt,
678
+ ._row_1k2h8_16 dd {
679
679
  margin: 0;
680
680
  line-height: var(--type-caption-sm-line);
681
681
  }
682
- ._row_1hsxt_16 dd {
682
+ ._row_1k2h8_16 dd {
683
683
  line-height: var(--type-caption-sm-line);
684
684
  white-space: nowrap;
685
685
  font-variant-numeric: tabular-nums;
686
686
  }
687
- ._free_1hsxt_53 {
687
+ ._free_1k2h8_53 {
688
688
  color: var(--color-state-text-success);
689
689
  font-weight: var(--font-weight-bold);
690
690
  }
691
- ._pending_1hsxt_59 {
691
+ ._pending_1k2h8_59 {
692
692
  font-size: var(--type-trimmed-xs-size);
693
693
  color: var(--color-text-subtle);
694
694
  }
695
- ._row_1hsxt_16._discount_1hsxt_69 dt,
696
- ._row_1hsxt_16._discount_1hsxt_69 dd {
695
+ ._row_1k2h8_16._discount_1k2h8_69 dt,
696
+ ._row_1k2h8_16._discount_1k2h8_69 dd {
697
697
  color: var(--color-state-text-success);
698
698
  }
699
- ._lines_1lx0d_19 {
699
+ @media (min-width: 1200px) {
700
+ [data-shop-layout=wide] ._row_1k2h8_16 {
701
+ padding: var(--space-12) var(--space-16);
702
+ box-shadow: inset 0 1px 0 var(--color-border-default);
703
+ }
704
+ [data-shop-layout=wide] ._free_1k2h8_53 {
705
+ color: var(--color-text-default);
706
+ }
707
+ }
708
+ ._lines_gr6vv_19 {
700
709
  list-style: none;
701
710
  margin: 0;
702
711
  padding: 0;
@@ -704,12 +713,12 @@
704
713
  flex-direction: column;
705
714
  gap: var(--space-16);
706
715
  }
707
- ._line_1lx0d_19 {
716
+ ._line_gr6vv_19 {
708
717
  display: flex;
709
718
  align-items: center;
710
719
  gap: var(--space-12);
711
720
  }
712
- ._thumb_1lx0d_34 {
721
+ ._thumb_gr6vv_34 {
713
722
  position: relative;
714
723
  flex-shrink: 0;
715
724
  width: 48px;
@@ -718,15 +727,15 @@
718
727
  overflow: hidden;
719
728
  background: var(--color-surface-soft);
720
729
  }
721
- ._image_1lx0d_44 {
730
+ ._image_gr6vv_44 {
722
731
  object-fit: cover;
723
732
  object-position: top;
724
733
  }
725
- ._placeholder_1lx0d_51 {
734
+ ._placeholder_gr6vv_51 {
726
735
  width: 100%;
727
736
  height: 100%;
728
737
  }
729
- ._lineBody_1lx0d_56 {
738
+ ._lineBody_gr6vv_56 {
730
739
  display: flex;
731
740
  align-items: flex-start;
732
741
  justify-content: space-between;
@@ -734,14 +743,14 @@
734
743
  flex: 1 1 0;
735
744
  min-width: 0;
736
745
  }
737
- ._lineText_1lx0d_65 {
746
+ ._lineText_gr6vv_65 {
738
747
  display: flex;
739
748
  flex-direction: column;
740
749
  gap: var(--space-12);
741
750
  flex: 1 1 0;
742
751
  min-width: 0;
743
752
  }
744
- ._lineTitle_1lx0d_75 {
753
+ ._lineTitle_gr6vv_75 {
745
754
  margin: -6px 0;
746
755
  padding: 6px 0;
747
756
  font-size: var(--type-trimmed-sm-size);
@@ -751,7 +760,7 @@
751
760
  overflow: hidden;
752
761
  text-overflow: ellipsis;
753
762
  }
754
- ._lineMeta_1lx0d_106 {
763
+ ._lineMeta_gr6vv_106 {
755
764
  display: flex;
756
765
  align-items: center;
757
766
  flex-wrap: wrap;
@@ -761,10 +770,10 @@
761
770
  line-height: 11px;
762
771
  color: var(--color-text-subtle);
763
772
  }
764
- ._detail_1lx0d_103 {
773
+ ._detail_gr6vv_103 {
765
774
  white-space: nowrap;
766
775
  }
767
- ._linePrice_1lx0d_127 {
776
+ ._linePrice_gr6vv_127 {
768
777
  display: flex;
769
778
  flex-direction: column;
770
779
  align-items: flex-end;
@@ -773,12 +782,12 @@
773
782
  white-space: nowrap;
774
783
  font-variant-numeric: tabular-nums;
775
784
  }
776
- ._paid_1lx0d_139 {
785
+ ._paid_gr6vv_139 {
777
786
  font-size: var(--type-trimmed-md-size);
778
787
  line-height: 11px;
779
788
  font-weight: var(--font-weight-bold);
780
789
  }
781
- ._was_1lx0d_152 {
790
+ ._was_gr6vv_152 {
782
791
  display: flex;
783
792
  align-items: center;
784
793
  justify-content: flex-end;
@@ -788,14 +797,14 @@
788
797
  color: var(--color-text-disabled);
789
798
  text-decoration: line-through;
790
799
  }
791
- ._card_1lx0d_175 {
800
+ ._card_gr6vv_175 {
792
801
  display: flex;
793
802
  flex-direction: column;
794
803
  box-shadow: inset 0 0 0 1px var(--color-border-default);
795
804
  border-radius: var(--radius-18);
796
805
  overflow: hidden;
797
806
  }
798
- ._cardTitle_1lx0d_183 {
807
+ ._cardTitle_gr6vv_183 {
799
808
  display: flex;
800
809
  align-items: center;
801
810
  margin: 0;
@@ -806,19 +815,19 @@
806
815
  line-height: 1.38;
807
816
  font-weight: var(--font-weight-bold);
808
817
  }
809
- ._cardBody_1lx0d_195 {
818
+ ._cardBody_gr6vv_195 {
810
819
  margin: 0;
811
820
  padding: var(--space-16);
812
821
  font-size: var(--type-trimmed-sm-size);
813
822
  line-height: 1.5;
814
823
  }
815
- ._summaryCard_1lx0d_167 {
824
+ ._summaryCard_gr6vv_167 {
816
825
  background: var(--color-surface-soft);
817
826
  }
818
- ._summaryCard_1lx0d_167 > :last-child {
827
+ ._summaryCard_gr6vv_167 > :last-child {
819
828
  padding: 0 var(--space-16);
820
829
  }
821
- ._itemsHeader_1lx0d_14 {
830
+ ._itemsHeader_gr6vv_14 {
822
831
  display: flex;
823
832
  align-items: center;
824
833
  gap: var(--space-12);
@@ -826,7 +835,7 @@
826
835
  padding: 0 var(--space-16);
827
836
  border-bottom: 1px solid var(--color-border-default);
828
837
  }
829
- ._itemsTitle_1lx0d_238 {
838
+ ._itemsTitle_gr6vv_238 {
830
839
  flex: 1 0 0;
831
840
  min-width: 0;
832
841
  margin: 0;
@@ -834,7 +843,7 @@
834
843
  line-height: 1.38;
835
844
  font-weight: var(--font-weight-bold);
836
845
  }
837
- ._itemsCount_1lx0d_249 {
846
+ ._itemsCount_gr6vv_249 {
838
847
  display: inline-flex;
839
848
  align-items: center;
840
849
  justify-content: center;
@@ -849,10 +858,21 @@
849
858
  letter-spacing: 0.12px;
850
859
  font-variant-numeric: tabular-nums;
851
860
  }
852
- ._cardLines_1lx0d_268 {
861
+ ._cardLines_gr6vv_268 {
853
862
  gap: var(--space-12);
854
863
  padding: var(--space-12) var(--space-16);
855
864
  }
865
+ @media (min-width: 1200px) {
866
+ [data-shop-layout=wide] ._summaryCard_gr6vv_167 {
867
+ background: var(--color-surface-default);
868
+ }
869
+ [data-shop-layout=wide] ._summaryCard_gr6vv_167 ._cardTitle_gr6vv_183 {
870
+ border-bottom: 0;
871
+ }
872
+ [data-shop-layout=wide] ._summaryCard_gr6vv_167 > :last-child {
873
+ padding: 0;
874
+ }
875
+ }
856
876
  ._header_1f3nh_7 {
857
877
  display: flex;
858
878
  align-items: flex-start;
@@ -1444,24 +1464,212 @@
1444
1464
  text-decoration: line-through;
1445
1465
  font-variant-numeric: tabular-nums;
1446
1466
  }
1447
- ._page_1iwin_8 {
1467
+ ._crumbs_1qwg2_1 {
1468
+ display: flex;
1469
+ align-items: center;
1470
+ height: 21px;
1471
+ gap: var(--space-8);
1472
+ margin: 0;
1473
+ padding: 0;
1474
+ list-style: none;
1475
+ color: var(--color-text-default);
1476
+ white-space: nowrap;
1477
+ }
1478
+ ._home_1qwg2_13 {
1479
+ padding: 0;
1480
+ border: 0;
1481
+ background: none;
1482
+ color: inherit;
1483
+ font: inherit;
1484
+ font-size: 16px;
1485
+ line-height: normal;
1486
+ opacity: 0.6;
1487
+ cursor: pointer;
1488
+ }
1489
+ ._trail_1qwg2_25 {
1490
+ font-size: 16px;
1491
+ line-height: normal;
1492
+ opacity: 0.6;
1493
+ }
1494
+ ._separator_1qwg2_31 {
1495
+ font-size: 14px;
1496
+ line-height: 1.5;
1497
+ opacity: 0.6;
1498
+ }
1499
+ ._current_1qwg2_37 {
1500
+ font-size: 16px;
1501
+ line-height: normal;
1502
+ }
1503
+ ._help_1qwg2_42 {
1504
+ display: flex;
1505
+ align-items: center;
1506
+ gap: var(--space-8);
1507
+ width: 100%;
1508
+ padding: var(--space-8) 0;
1509
+ border: 0;
1510
+ background: none;
1511
+ color: var(--color-text-default);
1512
+ font: inherit;
1513
+ text-align: left;
1514
+ cursor: pointer;
1515
+ }
1516
+ ._helpLabel_1qwg2_56 {
1517
+ font-size: 14px;
1518
+ line-height: 1.5;
1519
+ text-decoration: underline;
1520
+ }
1521
+ ._crumbs_19inq_1,
1522
+ ._help_19inq_2,
1523
+ ._skeleton_19inq_3 {
1524
+ display: none;
1525
+ }
1526
+ @media (min-width: 1200px) {
1527
+ ._crumbs_19inq_1 {
1528
+ display: block;
1529
+ grid-area: crumbs;
1530
+ margin-bottom: 29px;
1531
+ }
1532
+ ._help_19inq_2 {
1533
+ display: block;
1534
+ }
1535
+ ._skeleton_19inq_3 {
1536
+ display: grid;
1537
+ grid-template-columns: 560px 432px;
1538
+ grid-template-areas: "crumbs crumbs" "main aside";
1539
+ column-gap: 96px;
1540
+ align-items: start;
1541
+ align-content: start;
1542
+ justify-content: center;
1543
+ padding: 54px 0 64px;
1544
+ min-height: inherit;
1545
+ background: var(--color-surface-base);
1546
+ }
1547
+ ._skeleton_19inq_3 span[aria-hidden=true] {
1548
+ background:
1549
+ linear-gradient(
1550
+ 90deg,
1551
+ var(--color-border-default) 25%,
1552
+ var(--color-surface-soft) 37%,
1553
+ var(--color-border-default) 63%);
1554
+ background-size: 400% 100%;
1555
+ }
1556
+ ._skeleton_19inq_3 ._skConnector_19inq_43 {
1557
+ background: var(--color-surface-soft);
1558
+ }
1559
+ ._skMain_19inq_47 {
1560
+ grid-area: main;
1561
+ display: flex;
1562
+ flex-direction: column;
1563
+ }
1564
+ ._skSubtitle_19inq_53 {
1565
+ margin-top: 10px;
1566
+ }
1567
+ ._skTimeline_19inq_57 {
1568
+ display: flex;
1569
+ flex-direction: column;
1570
+ margin-top: 17px;
1571
+ padding-left: 5px;
1572
+ }
1573
+ ._skStep_19inq_64 {
1574
+ display: flex;
1575
+ align-items: flex-start;
1576
+ gap: 12px;
1577
+ height: 24px;
1578
+ }
1579
+ ._skStepText_19inq_71 {
1580
+ display: flex;
1581
+ flex-direction: column;
1582
+ gap: 7px;
1583
+ padding-top: 5px;
1584
+ }
1585
+ ._skConnector_19inq_43 {
1586
+ width: 1px;
1587
+ margin: 2px 0 2px 11.5px;
1588
+ background: var(--color-surface-soft);
1589
+ }
1590
+ ._skAside_19inq_84 {
1591
+ grid-area: aside;
1592
+ display: flex;
1593
+ flex-direction: column;
1594
+ gap: 16px;
1595
+ }
1596
+ ._skLine_19inq_91 {
1597
+ display: flex;
1598
+ align-items: flex-start;
1599
+ gap: 12px;
1600
+ }
1601
+ ._skLineText_19inq_97 {
1602
+ display: flex;
1603
+ flex-direction: column;
1604
+ gap: 17px;
1605
+ flex: 1 1 0;
1606
+ padding-top: 3px;
1607
+ }
1608
+ ._skMeta_19inq_105 {
1609
+ display: flex;
1610
+ align-items: center;
1611
+ gap: 4px;
1612
+ padding-left: 1px;
1613
+ }
1614
+ ._skBadge_19inq_112 {
1615
+ margin-left: 27px;
1616
+ }
1617
+ ._skPrice_19inq_116 {
1618
+ display: flex;
1619
+ flex-direction: column;
1620
+ align-items: flex-end;
1621
+ gap: 3px;
1622
+ padding-top: 2px;
1623
+ }
1624
+ ._skCard_19inq_124 {
1625
+ display: flex;
1626
+ flex-direction: column;
1627
+ box-shadow: inset 0 0 0 1px var(--color-border-default);
1628
+ border-radius: var(--radius-18);
1629
+ padding: 23px 17px 0;
1630
+ }
1631
+ ._skAddress_19inq_132 {
1632
+ height: 113px;
1633
+ gap: 41px;
1634
+ }
1635
+ ._skSummary_19inq_137 {
1636
+ height: 240px;
1637
+ }
1638
+ ._skSummary_19inq_137 {
1639
+ position: relative;
1640
+ }
1641
+ ._skCell_19inq_145 {
1642
+ position: absolute;
1643
+ display: block;
1644
+ }
1645
+ ._skHelp_19inq_150 {
1646
+ display: flex;
1647
+ align-items: center;
1648
+ gap: 8px;
1649
+ padding: 8px 0;
1650
+ }
1651
+ ._skHelp_19inq_150 > :last-child {
1652
+ margin-top: 2px;
1653
+ }
1654
+ }
1655
+ ._page_j9tz4_8 {
1448
1656
  display: flex;
1449
1657
  flex-direction: column;
1450
1658
  gap: var(--space-32);
1451
1659
  padding: var(--space-20) var(--space-16) var(--space-24);
1452
1660
  }
1453
- ._widget_1iwin_18 {
1661
+ ._widget_j9tz4_18 {
1454
1662
  display: flex;
1455
1663
  flex-direction: column;
1456
1664
  gap: var(--space-32);
1457
1665
  }
1458
- ._titleRow_1iwin_26 {
1666
+ ._titleRow_j9tz4_26 {
1459
1667
  display: flex;
1460
1668
  align-items: center;
1461
1669
  justify-content: space-between;
1462
1670
  gap: var(--space-12);
1463
1671
  }
1464
- ._headline_1iwin_42 {
1672
+ ._headline_j9tz4_42 {
1465
1673
  margin: -9px 0;
1466
1674
  padding: 9px 0;
1467
1675
  min-width: 0;
@@ -1472,7 +1680,7 @@
1472
1680
  text-overflow: ellipsis;
1473
1681
  white-space: nowrap;
1474
1682
  }
1475
- ._track_1iwin_74 {
1683
+ ._track_j9tz4_74 {
1476
1684
  display: inline-flex;
1477
1685
  align-items: center;
1478
1686
  gap: var(--space-6);
@@ -1483,43 +1691,43 @@
1483
1691
  color: var(--color-text-default);
1484
1692
  text-decoration: none;
1485
1693
  }
1486
- ._track_1iwin_74:focus-visible {
1694
+ ._track_j9tz4_74:focus-visible {
1487
1695
  outline: none;
1488
1696
  box-shadow: var(--focus-ring);
1489
1697
  border-radius: var(--radius-4);
1490
1698
  }
1491
- ._rule_1iwin_99 {
1699
+ ._rule_j9tz4_99 {
1492
1700
  height: 1px;
1493
1701
  margin: 0 0 -1px;
1494
1702
  border: 0;
1495
1703
  background: var(--color-border-default);
1496
1704
  }
1497
- ._help_1iwin_109 {
1705
+ ._help_j9tz4_109 {
1498
1706
  display: flex;
1499
1707
  flex-direction: column;
1500
1708
  gap: var(--space-6);
1501
1709
  }
1502
- ._helpTitle_1iwin_115 {
1710
+ ._helpTitle_j9tz4_115 {
1503
1711
  margin: 0;
1504
1712
  font-size: var(--type-heading-md-size);
1505
1713
  line-height: 1.32;
1506
1714
  font-weight: var(--font-weight-bold);
1507
1715
  }
1508
- ._helpRows_1iwin_122 {
1716
+ ._helpRows_j9tz4_122 {
1509
1717
  display: flex;
1510
1718
  flex-direction: column;
1511
1719
  }
1512
- ._helpRowEnd_1iwin_131 {
1720
+ ._helpRowEnd_j9tz4_131 {
1513
1721
  display: flex;
1514
1722
  align-items: center;
1515
1723
  gap: var(--space-8);
1516
1724
  min-width: 0;
1517
1725
  }
1518
- ._helpStatus_1iwin_139 {
1726
+ ._helpStatus_j9tz4_139 {
1519
1727
  color: var(--color-text-subtle);
1520
1728
  white-space: nowrap;
1521
1729
  }
1522
- ._helpRow_1iwin_122 {
1730
+ ._helpRow_j9tz4_122 {
1523
1731
  display: flex;
1524
1732
  align-items: center;
1525
1733
  justify-content: space-between;
@@ -1537,14 +1745,14 @@
1537
1745
  text-align: left;
1538
1746
  cursor: pointer;
1539
1747
  }
1540
- ._helpRow_1iwin_122 + ._helpRow_1iwin_122 {
1748
+ ._helpRow_j9tz4_122 + ._helpRow_j9tz4_122 {
1541
1749
  border-top: 1px solid var(--color-border-subtle);
1542
1750
  }
1543
- ._helpRow_1iwin_122:focus-visible {
1751
+ ._helpRow_j9tz4_122:focus-visible {
1544
1752
  outline: none;
1545
1753
  box-shadow: var(--focus-ring);
1546
1754
  }
1547
- ._cancel_1iwin_197 {
1755
+ ._cancel_j9tz4_197 {
1548
1756
  display: inline-flex;
1549
1757
  align-items: center;
1550
1758
  justify-content: center;
@@ -1561,53 +1769,93 @@
1561
1769
  font-weight: var(--font-weight-bold);
1562
1770
  cursor: pointer;
1563
1771
  }
1564
- ._cancel_1iwin_197:focus-visible {
1772
+ ._cancel_j9tz4_197:focus-visible {
1565
1773
  outline: none;
1566
1774
  box-shadow: var(--focus-ring);
1567
1775
  }
1568
- ._cancelledHead_1iwin_221 {
1776
+ ._cancelledHead_j9tz4_221 {
1569
1777
  display: flex;
1570
1778
  flex-direction: column;
1571
1779
  gap: var(--space-8);
1572
1780
  }
1573
- ._cancelledTitle_1iwin_227 {
1781
+ ._cancelledTitle_j9tz4_227 {
1574
1782
  margin: 0;
1575
1783
  font-size: var(--type-heading-md-size);
1576
1784
  line-height: 1.32;
1577
1785
  font-weight: var(--font-weight-bold);
1578
1786
  color: var(--color-text-default);
1579
1787
  }
1580
- ._cancelledMeta_1iwin_241 {
1788
+ ._cancelledMeta_j9tz4_241 {
1581
1789
  margin: 0;
1582
1790
  font-size: var(--type-trimmed-sm-size);
1583
1791
  line-height: var(--type-trimmed-leading);
1584
1792
  margin-block: calc((var(--type-trimmed-sm-line) - var(--type-trimmed-leading) * 1em) / 2);
1585
1793
  color: var(--color-text-subtle);
1586
1794
  }
1587
- ._page_vqbqs_6 {
1795
+ ._aside_j9tz4_249 {
1796
+ display: contents;
1797
+ }
1798
+ @media (min-width: 1200px) {
1799
+ ._phoneSkeleton_j9tz4_254 {
1800
+ display: none;
1801
+ }
1802
+ ._wide_j9tz4_258 {
1803
+ display: grid;
1804
+ grid-template-columns: 560px 432px;
1805
+ grid-template-areas: "crumbs crumbs" "main aside";
1806
+ column-gap: 96px;
1807
+ row-gap: 0;
1808
+ align-items: start;
1809
+ align-content: start;
1810
+ justify-content: center;
1811
+ padding: 54px 0 64px;
1812
+ background: var(--color-surface-base);
1813
+ }
1814
+ ._wide_j9tz4_258 > ._widget_j9tz4_18 {
1815
+ grid-area: main;
1816
+ }
1817
+ ._wide_j9tz4_258 > ._rule_j9tz4_99 {
1818
+ display: none;
1819
+ }
1820
+ ._wide_j9tz4_258 > ._aside_j9tz4_249 {
1821
+ grid-area: aside;
1822
+ display: flex;
1823
+ flex-direction: column;
1824
+ gap: var(--space-16);
1825
+ }
1826
+ }
1827
+ @media (min-width: 1200px) {
1828
+ ._wide_j9tz4_258 {
1829
+ min-height: inherit;
1830
+ }
1831
+ ._wide_j9tz4_258 > ._widget_j9tz4_18 li:not(:last-child) [data-state=future] {
1832
+ color: var(--color-text-disabled);
1833
+ }
1834
+ }
1835
+ ._page_1c6sm_6 {
1588
1836
  display: flex;
1589
1837
  flex-direction: column;
1590
1838
  gap: var(--space-32);
1591
1839
  padding: var(--space-20) var(--space-16) var(--space-24);
1592
1840
  }
1593
- ._confirmed_vqbqs_16 {
1841
+ ._confirmed_1c6sm_16 {
1594
1842
  display: flex;
1595
1843
  flex-direction: column;
1596
1844
  gap: var(--space-24);
1597
1845
  }
1598
- ._title_vqbqs_22 {
1846
+ ._title_1c6sm_22 {
1599
1847
  display: flex;
1600
1848
  flex-direction: column;
1601
1849
  gap: var(--space-12);
1602
1850
  }
1603
- ._headline_vqbqs_47 {
1851
+ ._headline_1c6sm_47 {
1604
1852
  margin: 0;
1605
1853
  font-size: var(--type-heading-md-size);
1606
1854
  line-height: 14px;
1607
1855
  font-weight: var(--font-weight-bold);
1608
1856
  color: var(--color-state-text-success);
1609
1857
  }
1610
- ._subtitle_vqbqs_65 {
1858
+ ._subtitle_1c6sm_65 {
1611
1859
  margin: -6px 0;
1612
1860
  padding: 6px 0;
1613
1861
  font-size: var(--type-paragraph-size);
@@ -1618,15 +1866,52 @@
1618
1866
  text-overflow: ellipsis;
1619
1867
  white-space: nowrap;
1620
1868
  }
1621
- ._rule_vqbqs_77 {
1869
+ ._rule_1c6sm_77 {
1622
1870
  height: 1px;
1623
1871
  margin: 0 0 -1px;
1624
1872
  border: 0;
1625
1873
  background: var(--color-border-default);
1626
1874
  }
1627
- ._done_vqbqs_94 {
1875
+ ._done_1c6sm_94 {
1628
1876
  border-color: var(--color-surface-max);
1629
1877
  }
1878
+ ._aside_1c6sm_98 {
1879
+ display: contents;
1880
+ }
1881
+ @media (min-width: 1200px) {
1882
+ ._phoneSkeleton_1c6sm_103 {
1883
+ display: none;
1884
+ }
1885
+ ._wide_1c6sm_107 {
1886
+ display: grid;
1887
+ grid-template-columns: 560px 432px;
1888
+ grid-template-areas: "crumbs crumbs" "main aside";
1889
+ column-gap: 96px;
1890
+ row-gap: 0;
1891
+ align-items: start;
1892
+ align-content: start;
1893
+ justify-content: center;
1894
+ padding: 54px 0 64px;
1895
+ background: var(--color-surface-base);
1896
+ }
1897
+ ._wide_1c6sm_107 > ._confirmed_1c6sm_16 {
1898
+ grid-area: main;
1899
+ }
1900
+ ._wide_1c6sm_107 > ._rule_1c6sm_77 {
1901
+ display: none;
1902
+ }
1903
+ ._wide_1c6sm_107 > ._aside_1c6sm_98 {
1904
+ grid-area: aside;
1905
+ display: flex;
1906
+ flex-direction: column;
1907
+ gap: var(--space-16);
1908
+ }
1909
+ }
1910
+ @media (min-width: 1200px) {
1911
+ ._wide_1c6sm_107 {
1912
+ min-height: inherit;
1913
+ }
1914
+ }
1630
1915
  ._badge_u46qd_6 {
1631
1916
  display: inline-flex;
1632
1917
  align-items: center;
@@ -2904,30 +3189,30 @@
2904
3189
  animation: none;
2905
3190
  }
2906
3191
  }
2907
- ._root_1q3xe_1 {
3192
+ ._root_u44hz_1 {
2908
3193
  display: flex;
2909
3194
  flex-direction: column;
2910
3195
  gap: var(--space-12);
2911
3196
  }
2912
- ._header_1q3xe_11 {
3197
+ ._header_u44hz_11 {
2913
3198
  display: flex;
2914
3199
  align-items: center;
2915
3200
  justify-content: space-between;
2916
3201
  gap: var(--space-8);
2917
3202
  }
2918
- ._title_1q3xe_18 {
3203
+ ._title_u44hz_18 {
2919
3204
  margin: 0;
2920
3205
  font-size: var(--type-trimmed-md-size);
2921
3206
  line-height: var(--type-trimmed-md-line);
2922
3207
  font-weight: var(--font-weight-bold);
2923
3208
  color: var(--color-text-default);
2924
3209
  }
2925
- ._chips_1q3xe_26 {
3210
+ ._chips_u44hz_26 {
2926
3211
  display: flex;
2927
3212
  flex-wrap: wrap;
2928
3213
  gap: var(--space-8);
2929
3214
  }
2930
- ._chip_1q3xe_26 {
3215
+ ._chip_u44hz_26 {
2931
3216
  display: inline-flex;
2932
3217
  align-items: center;
2933
3218
  justify-content: center;
@@ -2943,30 +3228,32 @@
2943
3228
  font-weight: var(--font-weight-bold);
2944
3229
  cursor: pointer;
2945
3230
  }
2946
- ._selected_1q3xe_50 {
3231
+ ._selected_u44hz_50 {
2947
3232
  border-color: var(--color-surface-max);
2948
3233
  background: var(--color-surface-max);
2949
3234
  color: var(--color-text-strong);
2950
3235
  }
2951
- ._disabled_1q3xe_62 {
3236
+ ._disabled_u44hz_62 {
2952
3237
  cursor: not-allowed;
2953
3238
  border-style: dashed;
2954
3239
  color: var(--color-text-disabled);
2955
3240
  }
2956
- ._lowStock_1q3xe_74 {
3241
+ ._lowStock_u44hz_74 {
2957
3242
  margin: 0;
2958
3243
  font-size: var(--type-trimmed-sm-size);
2959
3244
  line-height: var(--type-trimmed-sm-line);
2960
3245
  font-weight: var(--font-weight-bold);
2961
3246
  color: var(--color-state-text-warning);
2962
3247
  }
2963
- ._error_1q3xe_84 {
3248
+ ._error_u44hz_84 {
2964
3249
  margin: 0;
2965
3250
  font-size: var(--type-trimmed-sm-size);
3251
+ line-height: var(--type-trimmed-sm-line);
3252
+ white-space: nowrap;
2966
3253
  font-weight: var(--font-weight-regular);
2967
3254
  color: var(--color-state-surface-critical-default);
2968
3255
  }
2969
- ._sizeGuide_1q3xe_91 {
3256
+ ._sizeGuide_u44hz_93 {
2970
3257
  position: relative;
2971
3258
  display: inline-flex;
2972
3259
  align-items: center;
@@ -2981,14 +3268,22 @@
2981
3268
  line-height: var(--type-trimmed-sm-line);
2982
3269
  cursor: pointer;
2983
3270
  }
2984
- ._info_1q3xe_115 {
3271
+ ._info_u44hz_117 {
2985
3272
  display: block;
2986
3273
  }
2987
- ._sizeGuide_1q3xe_91::after {
3274
+ ._sizeGuide_u44hz_93::after {
2988
3275
  content: "";
2989
3276
  position: absolute;
2990
3277
  inset: -24px -8px -8px;
2991
3278
  }
3279
+ @media (min-width: 1200px) {
3280
+ [data-shop-layout=wide] ._lowStock_u44hz_74 {
3281
+ font-weight: var(--font-weight-regular);
3282
+ }
3283
+ [data-shop-layout=wide] ._disabled_u44hz_62 {
3284
+ background: var(--color-surface-soft);
3285
+ }
3286
+ }
2992
3287
  ._root_1h4ny_1 {
2993
3288
  display: flex;
2994
3289
  flex-direction: column;
@@ -3116,39 +3411,45 @@
3116
3411
  text-decoration: line-through;
3117
3412
  background: var(--color-surface-soft);
3118
3413
  }
3119
- ._root_9cj0g_2 {
3414
+ ._root_1gy1f_2 {
3120
3415
  display: flex;
3121
3416
  flex-direction: column;
3122
3417
  gap: var(--space-4);
3123
3418
  }
3124
- ._group_9cj0g_8 {
3419
+ ._group_1gy1f_8 {
3125
3420
  display: flex;
3126
3421
  flex-direction: column;
3127
3422
  gap: var(--space-8);
3128
3423
  }
3129
- ._title_9cj0g_14 {
3424
+ ._title_1gy1f_14 {
3130
3425
  margin: 0;
3131
3426
  font-size: var(--type-trimmed-md-size);
3132
3427
  line-height: var(--type-trimmed-md-line);
3133
3428
  font-weight: var(--font-weight-bold);
3134
3429
  color: var(--color-text-default);
3135
3430
  }
3136
- ._body_9cj0g_22 {
3431
+ ._body_1gy1f_22 {
3137
3432
  color: var(--color-text-subtle);
3138
3433
  }
3139
- ._paragraph_9cj0g_26 {
3434
+ ._paragraph_1gy1f_26 {
3140
3435
  margin: 0;
3141
3436
  font-size: var(--type-paragraph-size);
3142
3437
  line-height: var(--type-paragraph-line);
3143
3438
  }
3144
- ._paragraph_9cj0g_26 + ._paragraph_9cj0g_26 {
3439
+ ._paragraph_1gy1f_26 + ._paragraph_1gy1f_26 {
3145
3440
  margin-top: var(--space-12);
3146
3441
  }
3147
- ._clamped_9cj0g_46 {
3442
+ ._clamped_1gy1f_46 {
3148
3443
  max-height: calc(var(--type-paragraph-size) * var(--type-paragraph-line) * 3);
3149
3444
  overflow: hidden;
3150
3445
  }
3151
- ._toggle_9cj0g_51 {
3446
+ ._clamped_1gy1f_46 > ._paragraph_1gy1f_26:first-child {
3447
+ display: -webkit-box;
3448
+ -webkit-box-orient: vertical;
3449
+ -webkit-line-clamp: 3;
3450
+ overflow: hidden;
3451
+ }
3452
+ ._toggle_1gy1f_58 {
3152
3453
  position: relative;
3153
3454
  align-self: flex-start;
3154
3455
  padding: 0;
@@ -3161,7 +3462,7 @@
3161
3462
  font-weight: var(--font-weight-bold);
3162
3463
  cursor: pointer;
3163
3464
  }
3164
- ._toggle_9cj0g_51::after {
3465
+ ._toggle_1gy1f_58::after {
3165
3466
  content: "";
3166
3467
  position: absolute;
3167
3468
  inset: -10px -4px;
@@ -3748,55 +4049,6 @@
3748
4049
  min-width: 173px;
3749
4050
  }
3750
4051
  }
3751
- ._crumbs_wl5mz_1 {
3752
- display: flex;
3753
- align-items: center;
3754
- height: 21px;
3755
- gap: var(--space-8);
3756
- margin: 0;
3757
- padding: 0;
3758
- list-style: none;
3759
- color: var(--color-text-default);
3760
- white-space: nowrap;
3761
- }
3762
- ._home_wl5mz_13 {
3763
- padding: 0;
3764
- border: 0;
3765
- background: none;
3766
- color: inherit;
3767
- font: inherit;
3768
- font-size: 16px;
3769
- line-height: normal;
3770
- opacity: 0.6;
3771
- cursor: pointer;
3772
- }
3773
- ._separator_wl5mz_25 {
3774
- font-size: 14px;
3775
- line-height: 1.5;
3776
- opacity: 0.6;
3777
- }
3778
- ._current_wl5mz_31 {
3779
- font-size: 16px;
3780
- line-height: normal;
3781
- }
3782
- ._help_wl5mz_36 {
3783
- display: flex;
3784
- align-items: center;
3785
- gap: var(--space-8);
3786
- width: 100%;
3787
- padding: var(--space-8) 0;
3788
- border: 0;
3789
- background: none;
3790
- color: var(--color-text-default);
3791
- font: inherit;
3792
- text-align: left;
3793
- cursor: pointer;
3794
- }
3795
- ._helpLabel_wl5mz_50 {
3796
- font-size: 14px;
3797
- line-height: 1.5;
3798
- text-decoration: underline;
3799
- }
3800
4052
  ._showcase_9ibf6_14 {
3801
4053
  --chrome-bleed: 0px;
3802
4054
  background: #080e12;