@sonic-equipment/ui 188.0.0 → 190.0.0

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 (82) hide show
  1. package/dist/cards/data-card/data-card.js +1 -1
  2. package/dist/country-selector/connected-country-selector.js +0 -11
  3. package/dist/country-selector/use-countries-languages.js +0 -11
  4. package/dist/delivery-time/delivery-time.js +3 -4
  5. package/dist/exports.d.ts +12 -3
  6. package/dist/forms/fields/select-field/select-field.js +1 -1
  7. package/dist/forms/layout/form/form.js +1 -1
  8. package/dist/header/link-list/navigation-link-list.js +14 -4
  9. package/dist/index.js +13 -4
  10. package/dist/intl/formatted-date.d.ts +4 -0
  11. package/dist/intl/formatted-date.js +8 -0
  12. package/dist/intl/translation-id.d.ts +1 -1
  13. package/dist/intl/use-formatted-date.d.ts +6 -0
  14. package/dist/intl/use-formatted-date.js +19 -0
  15. package/dist/lists/menu-list/menu-list-item.js +3 -1
  16. package/dist/lists/menu-list/menu-list-provider.d.ts +11 -0
  17. package/dist/lists/menu-list/menu-list-provider.js +30 -0
  18. package/dist/lists/menu-list/menu-list.d.ts +2 -1
  19. package/dist/lists/menu-list/menu-list.js +4 -3
  20. package/dist/lists/menu-list/menu-list.module.css.js +1 -1
  21. package/dist/lists/menu-list/use-menu-list-item.d.ts +5 -0
  22. package/dist/lists/menu-list/use-menu-list-item.js +12 -0
  23. package/dist/lists/menu-list/use-menu-list.d.ts +1 -0
  24. package/dist/lists/menu-list/use-menu-list.js +11 -0
  25. package/dist/loading/dynamic-loading-overlay.d.ts +5 -0
  26. package/dist/loading/dynamic-loading-overlay.js +26 -0
  27. package/dist/loading/dynamic-loading-overlay.module.css.js +3 -0
  28. package/dist/pages/checkout/cart-page/cart-page.js +1 -1
  29. package/dist/pages/checkout/order-confirmation-page/order-confirmation-page-content.js +2 -4
  30. package/dist/pages/error-page/error-page.js +2 -7
  31. package/dist/pages/my-sonic/actions/change-password/connected-change-password-dialog.js +0 -2
  32. package/dist/pages/my-sonic/navigation/my-sonic-desktop-navigation.js +1 -1
  33. package/dist/pages/my-sonic/pages/order-history/order-history.d.ts +1 -0
  34. package/dist/pages/my-sonic/pages/order-history/order-history.js +166 -0
  35. package/dist/pages/my-sonic/pages/order-history/order-history.module.css.js +3 -0
  36. package/dist/pages/product/product-listing-page/product-listing.js +1 -1
  37. package/dist/pages/product/search-result-page/search-results-page.js +1 -1
  38. package/dist/shared/api/storefront/hooks/orders/use-fetch-orders.d.ts +10 -0
  39. package/dist/shared/api/storefront/hooks/orders/use-fetch-orders.js +13 -0
  40. package/dist/shared/api/storefront/model/storefront.model.d.ts +13 -1
  41. package/dist/shared/api/storefront/model/storefront.model.js +28 -1
  42. package/dist/shared/api/storefront/services/order-service.d.ts +12 -0
  43. package/dist/shared/api/storefront/services/order-service.js +29 -0
  44. package/dist/shared/hooks/use-intersection-observer.d.ts +3 -1
  45. package/dist/shared/hooks/use-intersection-observer.js +3 -2
  46. package/dist/shared/utils/date.d.ts +4 -1
  47. package/dist/shared/utils/date.js +6 -5
  48. package/dist/shared/utils/price.d.ts +1 -1
  49. package/dist/shared/{hooks/use-scroll-to.d.ts → utils/scrolling.d.ts} +1 -1
  50. package/dist/shared/utils/scrolling.js +16 -0
  51. package/dist/shared/utils/uuid.d.ts +2 -1
  52. package/dist/styles.css +895 -640
  53. package/dist/table/data-table.d.ts +37 -10
  54. package/dist/table/data-table.js +72 -17
  55. package/dist/table/data-table.module.css.js +1 -1
  56. package/dist/table/elements/switch-sort-direction.d.ts +2 -0
  57. package/dist/table/elements/switch-sort-direction.js +11 -0
  58. package/dist/table/elements/table-context.d.ts +6 -5
  59. package/dist/table/elements/table-context.js +1 -16
  60. package/dist/table/elements/table-provider.d.ts +6 -5
  61. package/dist/table/elements/table-provider.js +23 -17
  62. package/dist/table/elements/table-row-context.d.ts +2 -2
  63. package/dist/table/elements/table-row-provider.js +4 -4
  64. package/dist/table/elements/table-sort-button.d.ts +8 -7
  65. package/dist/table/elements/table-sort-button.js +5 -4
  66. package/dist/table/elements/table.d.ts +1 -1
  67. package/dist/table/elements/table.js +2 -2
  68. package/dist/table/elements/table.module.css.js +1 -1
  69. package/dist/table/elements/td.d.ts +1 -1
  70. package/dist/table/elements/th.d.ts +1 -7
  71. package/dist/table/elements/th.js +2 -3
  72. package/dist/table/elements/tr.d.ts +2 -8
  73. package/dist/table/elements/tr.js +1 -3
  74. package/dist/table/elements/types.d.ts +36 -0
  75. package/dist/table/elements/use-table.js +1 -3
  76. package/dist/table/elements/use-td.d.ts +1 -1
  77. package/dist/table/elements/use-th.d.ts +2 -2
  78. package/package.json +1 -1
  79. package/dist/shared/hooks/use-scroll-to.js +0 -19
  80. package/dist/table/elements/table-column-properties.d.ts +0 -10
  81. package/dist/table/elements/use-tr.d.ts +0 -2
  82. package/dist/table/elements/use-tr.js +0 -16
package/dist/styles.css CHANGED
@@ -4653,6 +4653,13 @@ button.swiper-pagination-bullet {
4653
4653
  justify-self: center;
4654
4654
  }
4655
4655
 
4656
+ .select-field-module-T07fb .select-field-module-uGX30 .select-field-module-NyDa0 {
4657
+ block-size: 20px;
4658
+ grid-area: icon;
4659
+ inline-size: 20px;
4660
+ justify-self: center;
4661
+ }
4662
+
4656
4663
  .select-field-module-T07fb[data-invalid] .select-field-module-uGX30 {
4657
4664
  border-bottom-color: var(--color-brand-red);
4658
4665
  }
@@ -5891,44 +5898,31 @@ button.swiper-pagination-bullet {
5891
5898
  --ml-item-inner-spacing: var(--space-12);
5892
5899
  --ml-item-outer-spacing: var(--space-16);
5893
5900
  --ml-icon-size: 16px;
5901
+ --ml-min-size: 56px;
5894
5902
 
5895
5903
  position: relative;
5896
5904
  display: grid;
5897
5905
  overflow: hidden;
5898
5906
  color: currentcolor;
5907
+ container-type: inline-size;
5899
5908
  font-size: var(--ml-font-size);
5900
5909
  grid-template: auto 1fr / 1fr;
5901
5910
  grid-template-areas:
5902
5911
  'back-button'
5903
5912
  'scroll-area';
5913
+ min-inline-size: var(--ml-min-size);
5904
5914
  -webkit-user-select: none;
5905
5915
  -moz-user-select: none;
5906
5916
  user-select: none;
5907
5917
  }
5908
5918
 
5909
- /* TODO: scroll area row should stretch to avail height, but also enforce the scroll-area to scroll if overflowing */
5910
-
5911
- .menu-list-module-TloB9.menu-list-module-xUg6i {
5912
- --ml-font-size: var(--font-size-18);
5913
- --ml-font-weight: var(--font-weight-bold);
5914
- --ml-button-hover-color: var(--color-white);
5915
- --ml-button-hover-bgcolor: var(--color-brand-red);
5916
- --ml-link-hover-color: var(--color-white);
5917
- --ml-link-hover-bgcolor: var(--color-brand-red);
5918
- --ml-selected-color: var(--color-white);
5919
- --ml-selected-bgcolor: var(--color-brand-red);
5920
- }
5921
-
5922
5919
  /* scroll area */
5923
-
5924
5920
  .menu-list-module-TloB9.menu-list-module-AiDgG .menu-list-module-x3D-V {
5921
+ overflow: hidden auto;
5925
5922
  grid-area: scroll-area;
5926
- overflow-y: auto;
5927
5923
  scrollbar-width: thin;
5928
5924
  }
5929
-
5930
5925
  /* list */
5931
-
5932
5926
  .menu-list-module-TloB9 .menu-list-module-m3rpo {
5933
5927
  display: grid;
5934
5928
  padding: 0 0 1px;
@@ -5936,10 +5930,56 @@ button.swiper-pagination-bullet {
5936
5930
  grid-template-columns: 1fr;
5937
5931
  list-style: none;
5938
5932
  }
5939
-
5940
5933
  .menu-list-module-TloB9 .menu-list-module-m3rpo > * {
5941
5934
  margin-block: 0 -1px;
5942
5935
  }
5936
+ /* primary variant */
5937
+ .menu-list-module-TloB9.menu-list-module-xUg6i {
5938
+ --ml-font-size: var(--font-size-18);
5939
+ --ml-font-weight: var(--font-weight-bold);
5940
+ --ml-button-hover-color: var(--color-white);
5941
+ --ml-button-hover-bgcolor: var(--color-brand-red);
5942
+ --ml-link-hover-color: var(--color-white);
5943
+ --ml-link-hover-bgcolor: var(--color-brand-red);
5944
+ --ml-selected-color: var(--color-white);
5945
+ --ml-selected-bgcolor: var(--color-brand-red);
5946
+ }
5947
+ /* badges variant */
5948
+ @container (inline-size < 216px) {
5949
+ .menu-list-module-TloB9.menu-list-module-vd14x .menu-list-module-m3rpo {
5950
+ /* switch to fixed width below certain container sizes */
5951
+ inline-size: var(--ml-min-size);
5952
+ }
5953
+ /* no separator lines */
5954
+ .menu-list-module-TloB9.menu-list-module-vd14x .menu-list-module-4QhF4::before,
5955
+ .menu-list-module-TloB9.menu-list-module-vd14x .menu-list-module-4QhF4::after {
5956
+ display: none;
5957
+ }
5958
+
5959
+ /* hide the label */
5960
+ .menu-list-module-TloB9.menu-list-module-vd14x .menu-list-module-4QhF4 .menu-list-module-xFYyo > span {
5961
+ position: absolute;
5962
+ overflow: hidden;
5963
+ block-size: 0;
5964
+ inline-size: 0;
5965
+ }
5966
+
5967
+ .menu-list-module-TloB9.menu-list-module-vd14x .menu-list-module-4QhF4 .menu-list-module-4PbP- {
5968
+ margin: 0;
5969
+ }
5970
+
5971
+ .menu-list-module-TloB9.menu-list-module-vd14x .menu-list-module-4QhF4.menu-list-module-61uJb {
5972
+ grid-template-areas: '. imagebadge .';
5973
+ grid-template-columns: var(--mli-outer-spacing) max-content var(
5974
+ --mli-outer-spacing
5975
+ );
5976
+ }
5977
+
5978
+ /* stylelint-disable-next-line max-nesting-depth */
5979
+ .menu-list-module-TloB9.menu-list-module-vd14x .menu-list-module-4QhF4.menu-list-module-61uJb .menu-list-module-syyw9 {
5980
+ display: none;
5981
+ }
5982
+ }
5943
5983
 
5944
5984
  /* menu list back button */
5945
5985
 
@@ -6048,7 +6088,7 @@ button.swiper-pagination-bullet {
6048
6088
  minmax(var(--ml-item-minimal-height, 48px), min-content) / var(
6049
6089
  --mli-outer-spacing
6050
6090
  )
6051
- minmax(0, min-content) 1fr var(--mli-outer-spacing);
6091
+ max-content 1fr var(--mli-outer-spacing);
6052
6092
  grid-template-areas: '. imagebadge label .';
6053
6093
 
6054
6094
  /* children icon */
@@ -6188,13 +6228,14 @@ button.swiper-pagination-bullet {
6188
6228
  /* has children */
6189
6229
 
6190
6230
  .menu-list-module-4QhF4.menu-list-module-61uJb {
6231
+ --arrow-space: calc(
6232
+ var(--mli-inner-spacing) + var(--mli-icon-size) + var(--mli-inner-spacing)
6233
+ );
6234
+
6191
6235
  grid-template-areas: '. imagebadge label icon';
6192
6236
  grid-template-columns:
6193
- var(--mli-outer-spacing) minmax(0, min-content)
6194
- 1fr calc(
6195
- var(--mli-inner-spacing) + var(--mli-icon-size) +
6196
- var(--mli-inner-spacing)
6197
- );
6237
+ var(--mli-outer-spacing) max-content
6238
+ 1fr var(--arrow-space);
6198
6239
  }
6199
6240
 
6200
6241
  .menu-list-module-4QhF4.menu-list-module-61uJb:not(.menu-list-module-hiMca):has(.menu-list-module-xFYyo:hover) {
@@ -6712,6 +6753,61 @@ button.swiper-pagination-bullet {
6712
6753
  place-items: center;
6713
6754
  }
6714
6755
 
6756
+ .dynamic-loading-overlay-module-CAecM {
6757
+ --content-opacity: 0.35;
6758
+ --indicator-min-size: 176px;
6759
+ --intersected-height: 0px;
6760
+ --transition-duration: var(--transition-duration-short);
6761
+ --transition-delay: var(--transition-duration-short);
6762
+
6763
+ position: relative;
6764
+ display: grid;
6765
+ box-sizing: border-box;
6766
+ align-self: start;
6767
+ }
6768
+
6769
+ .dynamic-loading-overlay-module-CAecM .dynamic-loading-overlay-module-XeFAb {
6770
+ z-index: 1;
6771
+ grid-column: 1;
6772
+ grid-row: 1;
6773
+ transition: opacity var(--transition-duration);
6774
+ }
6775
+
6776
+ .dynamic-loading-overlay-module-CAecM .dynamic-loading-overlay-module-lhL5i {
6777
+ position: sticky;
6778
+ z-index: 2;
6779
+ box-sizing: border-box;
6780
+ block-size: var(--intersected-height);
6781
+ grid-column: 1;
6782
+ grid-row: 1;
6783
+ inset: 0;
6784
+ max-block-size: 100svh;
6785
+ min-block-size: var(--indicator-min-size);
6786
+ opacity: 0;
6787
+ pointer-events: none;
6788
+ transition:
6789
+ visibility var(--transition-duration),
6790
+ opacity var(--transition-duration);
6791
+ visibility: hidden;
6792
+ }
6793
+
6794
+ .dynamic-loading-overlay-module-CAecM .dynamic-loading-overlay-module-lhL5i .dynamic-loading-overlay-module-cpo4H {
6795
+ position: absolute;
6796
+ margin: auto;
6797
+ inset: 0;
6798
+ }
6799
+
6800
+ .dynamic-loading-overlay-module-CAecM.dynamic-loading-overlay-module-3bed- .dynamic-loading-overlay-module-XeFAb {
6801
+ opacity: var(--content-opacity);
6802
+ transition-delay: var(--transition-delay);
6803
+ }
6804
+
6805
+ .dynamic-loading-overlay-module-CAecM.dynamic-loading-overlay-module-3bed- .dynamic-loading-overlay-module-lhL5i {
6806
+ opacity: 1;
6807
+ transition-delay: var(--transition-delay);
6808
+ visibility: visible;
6809
+ }
6810
+
6715
6811
  .loading-overlay-module-L67Gy {
6716
6812
  position: fixed;
6717
6813
  display: grid;
@@ -7725,9 +7821,20 @@ button.swiper-pagination-bullet {
7725
7821
  }
7726
7822
 
7727
7823
  @media (width >= 768px) {.my-sonic-layout-module-ep0n3 {
7728
- --aside-size: clamp(236px, 22%, 308px);
7729
7824
  --gap: var(--space-20);
7730
7825
  --margin: 0;
7826
+ --aside-size: 56px;
7827
+ --aside-sticky-top: calc(var(--header-bottom, 0) + var(--space-16));
7828
+
7829
+ grid-template-areas:
7830
+ '. . title'
7831
+ 'aside . main';
7832
+ grid-template-columns: var(--aside-size) var(--gap) 1fr
7833
+ }
7834
+ }
7835
+
7836
+ @media (width >= 1024px) {.my-sonic-layout-module-ep0n3 {
7837
+ --aside-size: clamp(56px, 22%, 308px);
7731
7838
 
7732
7839
  grid-template-areas:
7733
7840
  'pre-aside . title'
@@ -7738,32 +7845,50 @@ button.swiper-pagination-bullet {
7738
7845
 
7739
7846
  @media (width >= 1440px) {.my-sonic-layout-module-ep0n3 {
7740
7847
  --gap: var(--space-40);
7741
- --padding: var(--space-48)
7848
+ --padding: var(--space-48);
7849
+ --aside-sticky-top: calc(var(--header-bottom, 0) + var(--space-20))
7742
7850
  }
7743
7851
  }
7744
7852
 
7853
+ /* title */
7854
+
7745
7855
  .my-sonic-layout-module-ep0n3 .my-sonic-layout-module-yMdPQ {
7746
7856
  align-self: last baseline;
7747
7857
  grid-area: title;
7748
7858
  margin-block-end: var(--margin);
7749
7859
  }
7750
7860
 
7861
+ /* main */
7862
+
7751
7863
  .my-sonic-layout-module-ep0n3 .my-sonic-layout-module-f0Bhf {
7752
7864
  container-type: inline-size;
7753
7865
  grid-area: main;
7754
7866
  }
7755
7867
 
7868
+ /* pre aside */
7869
+
7756
7870
  .my-sonic-layout-module-ep0n3 .my-sonic-layout-module-6pWHC {
7757
7871
  align-self: last baseline;
7758
7872
  grid-area: pre-aside;
7759
7873
  margin-block-end: var(--margin);
7760
7874
  }
7761
7875
 
7876
+ /* aside */
7877
+
7762
7878
  .my-sonic-layout-module-ep0n3 .my-sonic-layout-module--OEV- {
7879
+ align-self: start;
7763
7880
  grid-area: aside;
7764
7881
  margin-block-end: var(--margin);
7765
7882
  }
7766
7883
 
7884
+ @media (width >= 768px) {
7885
+
7886
+ .my-sonic-layout-module-ep0n3 .my-sonic-layout-module--OEV- {
7887
+ position: sticky;
7888
+ inset-block-start: var(--aside-sticky-top)
7889
+ }
7890
+ }
7891
+
7767
7892
  .my-sonic-desktop-navigation-module-f8Y3F {
7768
7893
  font-weight: bold;
7769
7894
  }
@@ -7780,794 +7905,924 @@ button.swiper-pagination-bullet {
7780
7905
  }
7781
7906
  }
7782
7907
 
7783
- .product-details-page-layout-module-pPtZX {
7784
- display: flex;
7785
- flex-direction: column;
7786
- padding-top: var(--space-24);
7787
- margin-bottom: var(--space-64);
7788
- gap: var(--space-64);
7908
+ .table-module-pevNG {
7909
+ position: relative;
7910
+ box-sizing: border-box;
7911
+ container-name: table-container;
7912
+ container-type: inline-size;
7913
+ overflow-x: auto;
7789
7914
  }
7790
7915
 
7791
- .product-details-page-layout-module-pPtZX .product-details-page-layout-module-KCKLZ .product-details-page-layout-module-0uf92 {
7792
- height: 100%;
7793
- align-self: flex-start;
7794
- margin-bottom: var(--space-16);
7795
- }
7916
+ .table-module-k47fT {
7917
+ --columns: 1;
7918
+ --border-color: var(--color-gray-200);
7919
+ --bgcolor-odd: var(--color-white);
7920
+ --bgcolor-even: var(--color-gray-50);
7921
+ --bgcolor-col-selected: rgb(0 0 0 / 5%);
7922
+ --bgcolor-row-selected: rgb(0 0 0 / 10%);
7923
+ --bgcolor-col-highlight: rgb(0 0 0 / 2.5%);
7924
+ --bgcolor-row-highlight: rgb(0 0 0 / 2.5%);
7925
+ --cell-padding: var(--space-12);
7926
+ --grid-columns-default: repeat(var(--columns), minmax(min-content, auto));
7927
+ --shadow: rgb(0 0 0 / 12.5%);
7928
+ --z-column: 10;
7929
+ --z-sticky: 11;
7930
+ --z-selected: 12;
7796
7931
 
7797
- .product-details-page-layout-module-pPtZX .product-details-page-layout-module-KCKLZ .product-details-page-layout-module-3-19O {
7798
- position: sticky;
7799
- top: calc(var(--header-bottom) + var(--space-8));
7800
- height: -moz-fit-content;
7801
- height: fit-content;
7802
- }
7932
+ @property --columns {
7933
+ initial-value: 1;
7934
+ syntax: '<integer>';
7935
+ }
7803
7936
 
7804
- .product-details-page-layout-module-pPtZX .product-details-page-layout-module-lfAgH {
7805
- display: flex;
7806
- flex-direction: column;
7807
- align-items: center;
7808
- gap: var(--space-24);
7937
+ position: relative;
7938
+ display: grid;
7939
+ box-sizing: border-box;
7940
+ padding: 0;
7941
+ background: var(--color-white);
7942
+ grid-template-columns: var(--grid-columns, var(--grid-columns-default));
7943
+ grid-template-rows:
7944
+ [clmns-start thead-start]
7945
+ auto
7946
+ [thead-end tbody-start]
7947
+ auto
7948
+ [tbody-end clmns-end];
7949
+ line-height: 1.25;
7950
+ max-inline-size: -moz-fit-content;
7951
+ max-inline-size: fit-content;
7952
+
7953
+ /* column highlighting (just 10 columns) */
7954
+ }
7955
+
7956
+ /* columns */
7957
+
7958
+ .table-module-k47fT .table-module-1lgqE {
7959
+ display: grid;
7960
+ grid-column: 1 / -1;
7961
+ grid-row: clmns;
7962
+ grid-template-columns: subgrid;
7963
+ pointer-events: none;
7809
7964
  }
7810
7965
 
7811
- .product-details-page-layout-module-pPtZX .product-details-page-layout-module-e8ZNQ {
7966
+ .table-module-k47fT .table-module-dISOo {
7812
7967
  position: relative;
7813
- left: -10px;
7814
- width: 100dvw;
7968
+ z-index: var(--z-column);
7815
7969
  }
7816
7970
 
7817
- @media (width >= 768px) {
7818
- .product-details-page-layout-module-pPtZX .product-details-page-layout-module-e8ZNQ {
7819
- position: relative;
7820
- left: auto;
7821
- width: auto;
7971
+ .table-module-k47fT .table-module-dISOo.table-module-WGz-I {
7972
+ background-blend-mode: multiply;
7973
+ background-color: var(--bgcolor-col-selected);
7822
7974
  }
7823
- }
7824
7975
 
7825
- @media (width >= 1024px) {
7826
- .product-details-page-layout-module-pPtZX .product-details-page-layout-module-KCKLZ {
7827
- display: grid;
7828
- gap: var(--space-24);
7829
- grid-template-columns: 396px 1fr;
7976
+ .table-module-k47fT .table-module-dISOo.table-module-PQejy {
7977
+ position: sticky;
7978
+ z-index: var(--z-selected);
7979
+ /* stylelint-disable-next-line declaration-property-value-no-unknown */
7980
+ container-type: scroll-state;
7981
+ inset-inline: 0;
7830
7982
  }
7831
7983
 
7832
- .product-details-page-layout-module-pPtZX .product-details-page-layout-module-KCKLZ .product-details-page-layout-module-0uf92 {
7833
- margin-bottom: 0;
7984
+ .table-module-k47fT .table-module-dISOo.table-module-PQejy::before,
7985
+ .table-module-k47fT .table-module-dISOo.table-module-PQejy::after {
7986
+ position: absolute;
7987
+ background: linear-gradient(-90deg, var(--shadow) 0%, transparent 100%);
7988
+ content: '';
7989
+ inline-size: var(--space-8);
7990
+ inset-block: 0;
7991
+ opacity: 0;
7992
+ transition: opacity var(--transition-duration-short);
7834
7993
  }
7835
- }
7836
7994
 
7837
- @media (width >= 1440px) {
7838
- .product-details-page-layout-module-pPtZX .product-details-page-layout-module-KCKLZ {
7839
- gap: var(--space-32);
7840
- grid-template-columns: 600px 1fr;
7841
- }
7842
- }
7995
+ .table-module-k47fT .table-module-dISOo.table-module-PQejy::before {
7996
+ inset-inline: auto 100%;
7997
+ }
7843
7998
 
7844
- .product-detail-images-module-ERzjA {
7845
- display: flex;
7846
- width: 100%;
7847
- height: 100%;
7848
- box-sizing: border-box;
7849
- align-items: center;
7850
- justify-content: center;
7851
- padding: 64px 48px;
7852
- }
7999
+ @container scroll-state(stuck: inline-end) {
7853
8000
 
7854
- .product-details-panel-module-MXfPm {
7855
- display: flex;
7856
- flex-direction: column;
7857
- gap: 24px;
7858
- }
8001
+ .table-module-k47fT .table-module-dISOo.table-module-PQejy::before {
8002
+ opacity: 1
8003
+ }
8004
+ }
7859
8005
 
7860
- .product-details-panel-module-MXfPm .product-details-panel-module-rtZYR {
7861
- display: flex;
7862
- flex-direction: column;
7863
- gap: 8px;
7864
- }
8006
+ .table-module-k47fT .table-module-dISOo.table-module-PQejy::after {
8007
+ inset-inline: 100% auto;
8008
+ rotate: 180deg;
8009
+ }
7865
8010
 
7866
- .product-details-panel-module-MXfPm .product-details-panel-module-IbS9- {
7867
- align-self: start;
7868
- }
8011
+ @container scroll-state(stuck: inline-start) {
7869
8012
 
7870
- .product-details-panel-module-MXfPm .product-details-panel-module-wHZCr {
7871
- display: flex;
7872
- width: 100%;
7873
- align-items: flex-end;
7874
- justify-content: space-between;
7875
- }
8013
+ .table-module-k47fT .table-module-dISOo.table-module-PQejy::after {
8014
+ opacity: 1
8015
+ }
8016
+ }
7876
8017
 
7877
- .product-details-panel-module-MXfPm .product-details-panel-module-wHZCr .product-details-panel-module-dI2JL {
7878
- --price-toggle-size: var(--price-size-larger);
8018
+ /* cells */
8019
+
8020
+ .table-module-k47fT .table-module-jRXnY,
8021
+ .table-module-k47fT .table-module-wJwSq {
8022
+ overflow: hidden;
8023
+ box-sizing: border-box;
8024
+ padding: var(--cell-padding);
8025
+ text-align: start;
8026
+ text-wrap: balance;
8027
+ }
8028
+
8029
+ .table-module-k47fT .table-module-jRXnY.table-module-h7qdo, .table-module-k47fT .table-module-wJwSq.table-module-h7qdo {
8030
+ text-wrap: nowrap;
7879
8031
  }
7880
8032
 
7881
- .product-details-panel-module-MXfPm .product-details-panel-module-wHZCr .product-details-panel-module-QLafW {
7882
- display: flex;
7883
- align-items: center;
8033
+ .table-module-k47fT .table-module-jRXnY.table-module-PQejy, .table-module-k47fT .table-module-wJwSq.table-module-PQejy {
8034
+ position: sticky;
8035
+ z-index: var(--z-sticky);
8036
+ inset-inline: 0;
7884
8037
  }
7885
8038
 
7886
- .product-details-panel-module-MXfPm .product-details-panel-module-9L-Nm {
7887
- margin-top: var(--space-12);
7888
- color: var(--color-brand-dark-gray);
7889
- font-size: 16px;
7890
- font-stretch: normal;
7891
- font-style: normal;
7892
- font-weight: normal;
7893
- letter-spacing: normal;
7894
- line-height: 1.5;
8039
+ .table-module-k47fT thead th {
8040
+ position: relative;
7895
8041
  }
7896
8042
 
7897
- .product-details-panel-module-MXfPm .product-details-panel-module-9L-Nm p {
7898
- margin: 0;
8043
+ .table-module-k47fT thead th:not(:last-child)::after {
8044
+ position: absolute;
8045
+ border-inline-end: 1px solid var(--border-color);
8046
+ content: '';
8047
+ inset: var(--space-8) 0 var(--space-8) auto;
7899
8048
  }
7900
8049
 
7901
- .product-details-panel-module-MXfPm .product-details-panel-module-NC2nx {
7902
- margin-top: var(--space-16);
7903
- margin-bottom: var(--space-24);
7904
- }
7905
-
7906
- .product-details-recently-viewed-section-module-cGFgH {
7907
- display: flex;
7908
- flex-direction: column;
7909
- align-items: center;
7910
- gap: var(--space-24);
7911
- }
8050
+ .table-module-k47fT tbody th.table-module-EWdty, .table-module-k47fT tbody td.table-module-EWdty {
8051
+ text-align: start;
8052
+ }
7912
8053
 
7913
- & .promo-banner-module-yuVEO {
7914
- position: relative;
7915
- display: block;
7916
- height: 122px;
7917
- outline: none;
7918
- }
8054
+ .table-module-k47fT tbody th.table-module-yJD74, .table-module-k47fT tbody td.table-module-yJD74 {
8055
+ text-align: end;
8056
+ }
7919
8057
 
7920
- & .promo-banner-module-yuVEO.promo-banner-module-ut8Kd {
7921
- width: 250px;
7922
- }
8058
+ .table-module-k47fT tbody th.table-module-XAdfy, .table-module-k47fT tbody td.table-module-XAdfy {
8059
+ text-align: center;
8060
+ }
7923
8061
 
7924
- & .promo-banner-module-yuVEO.promo-banner-module-CSkIw {
7925
- width: 310px;
7926
- }
8062
+ /* rows */
7927
8063
 
7928
- & .promo-banner-module-yuVEO picture {
7929
- width: 100%;
8064
+ .table-module-k47fT .table-module-Nisf1 {
8065
+ display: grid;
8066
+ border-block-end: 1px solid var(--border-color);
8067
+ grid-column: 1 / -1;
8068
+ grid-template-columns: subgrid;
8069
+ grid-template-rows: subgrid;
7930
8070
  }
7931
8071
 
7932
- & .promo-banner-module-yuVEO picture img {
7933
- width: 100%;
8072
+ .table-module-k47fT .table-module-Nisf1 .table-module-jRXnY,
8073
+ .table-module-k47fT .table-module-Nisf1 .table-module-wJwSq {
8074
+ background-color: var(--bgcolor-odd);
7934
8075
  }
7935
8076
 
7936
- & .promo-banner-module-yuVEO:focus-visible::after {
7937
- position: absolute;
7938
- display: block;
7939
- background-color: transparent;
7940
- box-shadow: var(--shadow-focus-outline) inset;
7941
- content: '';
7942
- inset: 0;
7943
- pointer-events: none;
7944
- -webkit-user-select: none;
7945
- -moz-user-select: none;
7946
- user-select: none;
7947
- }
8077
+ .table-module-k47fT .table-module-Nisf1:nth-child(even) .table-module-jRXnY,
8078
+ .table-module-k47fT .table-module-Nisf1:nth-child(even) .table-module-wJwSq {
8079
+ background-color: var(--bgcolor-even);
8080
+ }
7948
8081
 
7949
- @media (width >= 768px) {
7950
- & .promo-banner-module-yuVEO {
7951
- height: 230px;
7952
- }
8082
+ :has(.table-module-3zZB6) .table-module-k47fT .table-module-Nisf1::after {
8083
+ z-index: var(--z-selected);
8084
+ background-blend-mode: multiply;
8085
+ background-color: var(--bgcolor-row-highlight);
8086
+ content: '';
8087
+ grid-column: 1 / -1;
8088
+ opacity: 0;
8089
+ pointer-events: none;
8090
+ }
7953
8091
 
7954
- & .promo-banner-module-yuVEO.promo-banner-module-CSkIw,
7955
- & .promo-banner-module-yuVEO.promo-banner-module-ut8Kd {
7956
- width: auto;
8092
+ @media (pointer: fine) {
8093
+
8094
+ :has(.table-module-3zZB6) .table-module-k47fT .table-module-Nisf1:hover::after {
8095
+ opacity: 1
8096
+ }
8097
+ }
8098
+
8099
+ .table-module-k47fT .table-module-Nisf1.table-module-WGz-I::after {
8100
+ z-index: var(--z-selected);
8101
+ background-blend-mode: multiply;
8102
+ background-color: var(--bgcolor-row-selected);
8103
+ content: '';
8104
+ grid-column: 1 / -1;
8105
+ opacity: 1;
8106
+ pointer-events: none;
8107
+ }
8108
+
8109
+ .table-module-k47fT .table-module-Nisf1.table-module-qRfjM {
8110
+ cursor: pointer;
7957
8111
  }
7958
- }
7959
8112
 
7960
- .promo-banners-module-uVyxh {
7961
- margin-bottom: var(--space-24);
7962
- }
8113
+ /* table header */
7963
8114
 
7964
- @media (width >= 768px) {
7965
- .promo-banners-module-uVyxh {
8115
+ .table-module-k47fT .table-module-DK-wn {
7966
8116
  display: grid;
7967
- margin-bottom: var(--space-32);
7968
- gap: var(--space-16);
7969
- grid-template-columns: 2fr 1fr;
7970
- }
7971
- }
7972
-
7973
- @media (width >= 1440px) {
7974
- .promo-banners-module-uVyxh {
7975
- gap: var(--space-24);
7976
- grid-template-columns: 1.5fr 1fr;
8117
+ grid-column: 1 / -1;
8118
+ grid-row: thead;
8119
+ grid-template-columns: subgrid;
7977
8120
  }
7978
- }
7979
8121
 
7980
- .sidebar-module-fSa9Q.sidebar-module-AIq0M {
7981
- --transition-timing-function: ease-in-out;
8122
+ .table-module-k47fT .table-module-DK-wn .table-module-Nisf1 {
8123
+ border-block-start: 0;
8124
+ }
7982
8125
 
7983
- position: fixed;
7984
- z-index: calc(var(--sidebar-layer) + 1);
7985
- top: 0;
7986
- left: 0;
7987
- width: 382px;
7988
- max-width: 100vw;
7989
- height: 100%;
7990
- box-sizing: border-box;
7991
- padding-top: 46px;
7992
- padding-bottom: 56px;
7993
- background: var(--color-white);
7994
- }
8126
+ .table-module-k47fT .table-module-DK-wn .table-module-Nisf1 .table-module-jRXnY,
8127
+ .table-module-k47fT .table-module-DK-wn .table-module-Nisf1 .table-module-wJwSq {
8128
+ background-color: var(--bgcolor-even);
8129
+ font-weight: var(--font-weight-bold);
8130
+ }
7995
8131
 
7996
- .sidebar-module-fSa9Q.sidebar-module-AIq0M.sidebar-module-LEZgg {
7997
- transition: transform var(--transition-duration)
7998
- var(--transition-timing-function);
7999
- }
8132
+ /* table body */
8000
8133
 
8001
- .sidebar-module-fSa9Q.sidebar-module-AIq0M.sidebar-module-lV7wp {
8002
- box-shadow: var(--box-shadow-heavy);
8003
- pointer-events: auto;
8004
- transform: translateX(0);
8134
+ .table-module-k47fT .table-module-tygZb {
8135
+ display: grid;
8136
+ grid-column: 1 / -1;
8137
+ grid-row: tbody;
8138
+ grid-template-columns: subgrid;
8139
+ transition: opacity var(--transition-duration-short);
8005
8140
  }
8006
8141
 
8007
- .sidebar-module-fSa9Q.sidebar-module-AIq0M.sidebar-module-dGDrr {
8008
- box-shadow: none;
8009
- pointer-events: none;
8010
- transform: translateX(-100%);
8011
- }
8142
+ /* full width table */
8012
8143
 
8013
- .sidebar-module-fSa9Q.sidebar-module-AIq0M .sidebar-module-2puGC {
8014
- position: absolute;
8015
- z-index: calc(var(--sidebar-layer) + 2);
8016
- top: 36px;
8017
- right: 8px;
8144
+ .table-module-k47fT.table-module-YnmWV {
8145
+ min-inline-size: 100%;
8018
8146
  }
8019
8147
 
8020
- .sidebar-module-fSa9Q.sidebar-module-AIq0M .sidebar-module-2puGC svg {
8021
- display: block;
8022
- width: 32px;
8023
- height: 32px;
8024
- }
8025
-
8026
- .sidebar-module-fSa9Q.sidebar-module-AIq0M .sidebar-module-2puGC button {
8027
- -webkit-tap-highlight-color: transparent;
8148
+ .table-module-k47fT.table-module-YnmWV .table-module-skhNZ {
8149
+ text-align: start;
8028
8150
  }
8029
8151
 
8030
- .sidebar-module-fSa9Q.sidebar-module-Scw7D {
8031
- --transition-timing-function: ease-in-out;
8152
+ /* no text wrap for entire table */
8032
8153
 
8033
- position: static;
8034
- z-index: initial;
8035
- overflow: hidden;
8036
- width: 0;
8037
- padding: 0;
8038
- transform: translateX(0);
8039
- white-space: nowrap;
8040
- }
8154
+ .table-module-k47fT.table-module-h7qdo .table-module-Nisf1 .table-module-jRXnY,
8155
+ .table-module-k47fT.table-module-h7qdo .table-module-Nisf1 .table-module-wJwSq {
8156
+ text-wrap: nowrap;
8157
+ }
8041
8158
 
8042
- .sidebar-module-fSa9Q.sidebar-module-Scw7D.sidebar-module-LEZgg {
8043
- transition:
8044
- width var(--transition-duration) var(--transition-timing-function),
8045
- transform var(--transition-duration) var(--transition-timing-function);
8046
- }
8159
+ @media (pointer: fine) {
8047
8160
 
8048
- .sidebar-module-fSa9Q.sidebar-module-Scw7D.sidebar-module-lV7wp {
8049
- width: 324px;
8050
- box-shadow: none;
8161
+ .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th.table-module-hyPmy:nth-child(1):hover) .table-module-dISOo:nth-child(1),
8162
+ .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th.table-module-hyPmy:nth-child(2):hover) .table-module-dISOo:nth-child(2),
8163
+ .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th.table-module-hyPmy:nth-child(3):hover) .table-module-dISOo:nth-child(3),
8164
+ .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th.table-module-hyPmy:nth-child(4):hover) .table-module-dISOo:nth-child(4),
8165
+ .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th.table-module-hyPmy:nth-child(5):hover) .table-module-dISOo:nth-child(5),
8166
+ .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th.table-module-hyPmy:nth-child(6):hover) .table-module-dISOo:nth-child(6),
8167
+ .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th.table-module-hyPmy:nth-child(7):hover) .table-module-dISOo:nth-child(7),
8168
+ .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th.table-module-hyPmy:nth-child(8):hover) .table-module-dISOo:nth-child(8),
8169
+ .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th.table-module-hyPmy:nth-child(9):hover) .table-module-dISOo:nth-child(9),
8170
+ .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th.table-module-hyPmy:nth-child(10):hover) .table-module-dISOo:nth-child(10) {
8171
+ background-blend-mode: multiply;
8172
+ background-color: var(--bgcolor-col-highlight)
8051
8173
  }
8174
+ }
8052
8175
 
8053
- .sidebar-module-fSa9Q.sidebar-module-Scw7D.sidebar-module-dGDrr {
8054
- transform: translateX(0);
8055
- }
8176
+ /* table sort buttons */
8056
8177
 
8057
- .sidebar-module-fSa9Q.sidebar-module-Scw7D .sidebar-module-2puGC {
8058
- display: none;
8059
- }
8178
+ .table-module-RtOV- {
8179
+ --icon-space: 12px;
8180
+ --icon-size: 12px;
8181
+ --icon-rotation: 0deg;
8182
+ --icon-visibility: hidden;
8183
+ --gap: var(--space-4);
8060
8184
 
8061
- .product-listing-page-module-U0zLZ .product-listing-page-module-9a0ps {
8062
- margin-bottom: 44px;
8063
- }
8064
- .product-listing-page-module-U0zLZ .product-listing-page-module-VvYG3 {
8065
- margin-bottom: var(--space-24);
8185
+ all: unset;
8186
+ display: grid;
8187
+ align-items: baseline;
8188
+ padding: var(--cell-padding);
8189
+ cursor: pointer;
8190
+ gap: var(--gap);
8191
+ grid-template-areas: 'label icon';
8192
+ grid-template-columns: 1fr var(--icon-space);
8193
+ inline-size: 100%;
8194
+ text-align: start;
8195
+ }
8196
+
8197
+ .table-module-RtOV-:focus-visible {
8198
+ box-shadow: var(--shadow-focus-outline) inset;
8199
+ outline: none;
8066
8200
  }
8067
- .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo {
8068
- display: grid;
8069
- gap: var(--space-16);
8070
- justify-items: center;
8201
+
8202
+ .table-module-RtOV- .table-module-ukG8s {
8203
+ grid-area: label;
8071
8204
  }
8072
- .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-qhR-J,
8073
- .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3LRKg {
8074
- width: 100%;
8075
- }
8076
- .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-qhR-J > *, .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3LRKg > * {
8077
- display: flex;
8078
- width: 100%;
8079
- justify-content: center;
8080
- }
8081
- .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3Jtw- {
8082
- order: 2;
8083
- }
8084
- .product-listing-page-module-U0zLZ .product-listing-page-module-UwMEE {
8085
- margin-bottom: var(--space-44);
8205
+
8206
+ .table-module-RtOV- .table-module-QdiLJ {
8207
+ grid-area: icon;
8208
+ justify-self: center;
8209
+ rotate: var(--icon-rotation);
8210
+ visibility: var(--icon-visibility);
8086
8211
  }
8087
- .product-listing-page-module-U0zLZ .product-listing-page-module-cUe4a {
8088
- display: grid;
8089
- grid-template-columns: 1fr;
8212
+
8213
+ .table-module-RtOV-.table-module-gWy-a {
8214
+ --icon-visibility: visible;
8090
8215
  }
8091
- .product-listing-page-module-U0zLZ .product-listing-page-module-dtbXB {
8092
- display: flex;
8093
- flex-direction: column;
8216
+
8217
+ .table-module-RtOV-.table-module-9AwNp {
8218
+ --icon-rotation: 0deg;
8094
8219
  }
8095
- .product-listing-page-module-U0zLZ .product-listing-page-module-zKOQv {
8096
- margin-top: var(--space-24);
8097
- grid-column: span 2;
8220
+
8221
+ .table-module-RtOV-.table-module-aYS8r {
8222
+ --icon-rotation: 180deg;
8098
8223
  }
8099
- @media (width >= 768px) {
8100
- .product-listing-page-module-U0zLZ .product-listing-page-module-UwMEE {
8101
- margin-bottom: var(--space-64);
8102
- }
8103
8224
 
8104
- .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo {
8105
- display: grid;
8106
- align-items: center;
8107
- justify-content: space-between;
8108
- margin-bottom: var(--space-24);
8109
- grid-template-columns: repeat(3, 1fr);
8110
- row-gap: var(--space-8);
8111
- }
8225
+ .table-module-DK-wn .table-module-RtOV- {
8226
+ margin: calc(var(--cell-padding) * -1);
8227
+ }
8112
8228
 
8113
- .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-qhR-J,
8114
- .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3LRKg {
8115
- width: initial;
8116
- }
8229
+ .truncated-module-bwo1A {
8230
+ display: -webkit-box;
8231
+ text-wrap: auto;
8232
+ }
8117
8233
 
8118
- .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-qhR-J > *, .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3LRKg > * {
8119
- width: initial;
8120
- }
8234
+ .truncated-module-bwo1A.truncated-module-JHMUL {
8235
+ overflow: hidden;
8236
+ -webkit-box-orient: vertical;
8237
+ -webkit-line-clamp: var(--lines, 1);
8238
+ line-clamp: var(--lines, 1);
8239
+ text-overflow: ellipsis;
8240
+ }
8121
8241
 
8122
- .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-qhR-J {
8123
- justify-self: flex-start;
8124
- }
8242
+ .data-table-module-7CcZR {
8243
+ display: flex;
8244
+ flex-direction: column;
8245
+ gap: var(--space-16);
8246
+ }
8125
8247
 
8126
- .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3LRKg {
8127
- display: flex;
8128
- justify-self: flex-end;
8129
- }
8248
+ .data-table-module-WFG32 .data-table-module-9UZ8I {
8249
+ display: block;
8250
+ margin: 0 auto;
8251
+ block-size: var(--space-20);
8252
+ inline-size: var(--space-20);
8253
+ }
8130
8254
 
8131
- .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3Jtw- {
8132
- order: initial;
8133
- margin: auto;
8134
- }
8255
+ .order-history-module-LrkiZ {
8256
+ --gap-col: var(--space-8);
8257
+ --gap-row: var(--space-8);
8258
+ --z-index-sticky: 10;
8259
+ --sticky-top: var(--header-bottom, 0);
8260
+ --shadow: rgb(0 0 0 / 12.5%);
8261
+
8262
+ display: grid;
8263
+ gap: var(--gap-row) var(--gap-col);
8264
+ grid-template: [bar-start] auto [bar-end] repeat(
8265
+ 3,
8266
+ auto
8267
+ ) / [bar-start] 1fr [bar-end];
8268
+ grid-template-areas:
8269
+ 'search'
8270
+ 'filter'
8271
+ 'results'
8272
+ 'paging';
8273
+ scroll-margin-block: calc(var(--sticky-top) + var(--gap-row));
8274
+ }
8275
+
8276
+ @media (width >= 768px) {.order-history-module-LrkiZ {
8277
+ --gap-row: var(--space-16);
8278
+
8279
+ grid-template-areas:
8280
+ 'search filter'
8281
+ 'results results'
8282
+ 'paging paging';
8283
+ grid-template-columns: [bar-start] 1fr 1fr [bar-end]
8284
+ }
8135
8285
  }
8136
- @media (width >= 1440px) {
8137
- .product-listing-page-module-U0zLZ .product-listing-page-module-cUe4a {
8138
- grid-template-columns: auto 1fr;
8139
- }
8286
+
8287
+ @media (width >= 1024px) {.order-history-module-LrkiZ {
8288
+ grid-template-areas:
8289
+ '. search filter'
8290
+ 'results results results'
8291
+ 'paging paging paging';
8292
+ grid-template-columns: [bar-start] 1fr 26ch 26ch [bar-end]
8293
+ }
8140
8294
  }
8141
8295
 
8142
- .search-results-page-module-uE5NE .search-results-page-module-grXkv {
8143
- margin-bottom: 44px;
8296
+ @media (width >= 1440px) {.order-history-module-LrkiZ {
8297
+ --gap-row: var(--space-20)
8298
+ }
8144
8299
  }
8145
- .search-results-page-module-uE5NE .search-results-page-module--GBRi {
8146
- display: grid;
8147
- gap: var(--space-16);
8148
- justify-items: center;
8300
+
8301
+ /* search */
8302
+
8303
+ .order-history-module-LrkiZ .order-history-module-Y18m7 {
8304
+ position: sticky;
8305
+ z-index: var(--z-index-sticky);
8306
+ grid-area: search;
8307
+ inset-block-start: calc(var(--sticky-top, 0) + var(--gap-row));
8308
+ }
8309
+
8310
+ /* filter */
8311
+
8312
+ .order-history-module-LrkiZ .order-history-module-tBrZG {
8313
+ grid-area: filter;
8314
+ }
8315
+
8316
+ @media (width >= 768px) {
8317
+
8318
+ .order-history-module-LrkiZ .order-history-module-tBrZG {
8319
+ position: sticky;
8320
+ z-index: var(--z-index-sticky);
8321
+ inset-block-start: calc(var(--sticky-top) + var(--gap-row))
8149
8322
  }
8150
- .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-7G8Fo,
8151
- .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-MzRkN {
8152
- width: 100%;
8153
8323
  }
8154
- .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-7G8Fo > *, .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-MzRkN > * {
8155
- display: flex;
8156
- width: 100%;
8157
- justify-content: center;
8158
- }
8159
- .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-rhDU1 {
8160
- order: 2;
8324
+
8325
+ /* results */
8326
+
8327
+ .order-history-module-LrkiZ .order-history-module-5mST2 {
8328
+ grid-area: results;
8329
+ }
8330
+
8331
+ .order-history-module-LrkiZ .order-history-module-5mST2 .order-history-module-g-FzV {
8332
+ margin-block: var(--space-8);
8161
8333
  }
8162
- .search-results-page-module-uE5NE .search-results-page-module-uxlXw {
8163
- margin-bottom: var(--space-44);
8334
+
8335
+ /* paging */
8336
+
8337
+ .order-history-module-LrkiZ .order-history-module-POsiS {
8338
+ grid-area: paging;
8339
+ justify-self: center;
8340
+ padding-block: var(--gap-row);
8164
8341
  }
8165
- .search-results-page-module-uE5NE .search-results-page-module-p6Qod {
8166
- display: grid;
8167
- grid-template-columns: 1fr;
8342
+
8343
+ /* white bar behind sticky elements */
8344
+
8345
+ .order-history-module-LrkiZ .order-history-module-98Tvf {
8346
+ position: sticky;
8347
+ z-index: calc(var(--z-index-sticky) - 1);
8348
+ margin: calc(var(--gap-row) * -1)
8349
+ calc(var(--page-container-padding-inline) * -1);
8350
+ background-color: var(--color-white);
8351
+ /* stylelint-disable-next-line declaration-property-value-no-unknown */
8352
+ container-type: scroll-state;
8353
+ grid-area: bar;
8354
+ inset-block: var(--sticky-top, 0);
8168
8355
  }
8169
- .search-results-page-module-uE5NE .search-results-page-module-7T07c {
8356
+
8357
+ @media (width >= 768px) {
8358
+
8359
+ .order-history-module-LrkiZ .order-history-module-98Tvf {
8360
+ margin-inline: 0
8361
+ }
8362
+ }
8363
+
8364
+ .order-history-module-LrkiZ .order-history-module-98Tvf::after {
8365
+ position: absolute;
8366
+ background: linear-gradient(180deg, var(--shadow) 0%, transparent 100%);
8367
+ block-size: var(--space-8);
8368
+ content: '';
8369
+ inset: 100% 0 auto;
8370
+ opacity: 0;
8371
+ transition: opacity var(--transition-duration-short);
8372
+ }
8373
+
8374
+ @container scroll-state(stuck: block-start) {
8375
+
8376
+ .order-history-module-LrkiZ .order-history-module-98Tvf::after {
8377
+ opacity: 1
8378
+ }
8379
+ }
8380
+
8381
+ .product-details-page-layout-module-pPtZX {
8382
+ display: flex;
8383
+ flex-direction: column;
8384
+ padding-top: var(--space-24);
8385
+ margin-bottom: var(--space-64);
8386
+ gap: var(--space-64);
8387
+ }
8388
+
8389
+ .product-details-page-layout-module-pPtZX .product-details-page-layout-module-KCKLZ .product-details-page-layout-module-0uf92 {
8390
+ height: 100%;
8391
+ align-self: flex-start;
8392
+ margin-bottom: var(--space-16);
8393
+ }
8394
+
8395
+ .product-details-page-layout-module-pPtZX .product-details-page-layout-module-KCKLZ .product-details-page-layout-module-3-19O {
8396
+ position: sticky;
8397
+ top: calc(var(--header-bottom) + var(--space-8));
8398
+ height: -moz-fit-content;
8399
+ height: fit-content;
8400
+ }
8401
+
8402
+ .product-details-page-layout-module-pPtZX .product-details-page-layout-module-lfAgH {
8170
8403
  display: flex;
8171
8404
  flex-direction: column;
8405
+ align-items: center;
8406
+ gap: var(--space-24);
8172
8407
  }
8173
- .search-results-page-module-uE5NE .search-results-page-module-zcJy7 {
8174
- margin-top: var(--space-24);
8175
- grid-column: span 2;
8408
+
8409
+ .product-details-page-layout-module-pPtZX .product-details-page-layout-module-e8ZNQ {
8410
+ position: relative;
8411
+ left: -10px;
8412
+ width: 100dvw;
8176
8413
  }
8414
+
8177
8415
  @media (width >= 768px) {
8178
- .search-results-page-module-uE5NE .search-results-page-module-uxlXw {
8179
- margin-bottom: var(--space-64);
8416
+ .product-details-page-layout-module-pPtZX .product-details-page-layout-module-e8ZNQ {
8417
+ position: relative;
8418
+ left: auto;
8419
+ width: auto;
8180
8420
  }
8421
+ }
8181
8422
 
8182
- .search-results-page-module-uE5NE .search-results-page-module--GBRi {
8423
+ @media (width >= 1024px) {
8424
+ .product-details-page-layout-module-pPtZX .product-details-page-layout-module-KCKLZ {
8183
8425
  display: grid;
8184
- align-items: center;
8185
- justify-content: space-between;
8186
- margin-bottom: var(--space-24);
8187
- grid-template-columns: repeat(3, 1fr);
8188
- row-gap: var(--space-8);
8426
+ gap: var(--space-24);
8427
+ grid-template-columns: 396px 1fr;
8189
8428
  }
8190
8429
 
8191
- .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-7G8Fo,
8192
- .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-MzRkN {
8193
- width: initial;
8430
+ .product-details-page-layout-module-pPtZX .product-details-page-layout-module-KCKLZ .product-details-page-layout-module-0uf92 {
8431
+ margin-bottom: 0;
8194
8432
  }
8433
+ }
8195
8434
 
8196
- .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-7G8Fo > *, .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-MzRkN > * {
8197
- width: initial;
8198
- }
8435
+ @media (width >= 1440px) {
8436
+ .product-details-page-layout-module-pPtZX .product-details-page-layout-module-KCKLZ {
8437
+ gap: var(--space-32);
8438
+ grid-template-columns: 600px 1fr;
8439
+ }
8440
+ }
8199
8441
 
8200
- .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-7G8Fo {
8201
- justify-self: flex-start;
8202
- }
8442
+ .product-detail-images-module-ERzjA {
8443
+ display: flex;
8444
+ width: 100%;
8445
+ height: 100%;
8446
+ box-sizing: border-box;
8447
+ align-items: center;
8448
+ justify-content: center;
8449
+ padding: 64px 48px;
8450
+ }
8203
8451
 
8204
- .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-MzRkN {
8205
- display: flex;
8206
- justify-self: flex-end;
8207
- }
8452
+ .product-details-panel-module-MXfPm {
8453
+ display: flex;
8454
+ flex-direction: column;
8455
+ gap: 24px;
8456
+ }
8208
8457
 
8209
- .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-rhDU1 {
8210
- order: initial;
8211
- margin: auto;
8212
- }
8458
+ .product-details-panel-module-MXfPm .product-details-panel-module-rtZYR {
8459
+ display: flex;
8460
+ flex-direction: column;
8461
+ gap: 8px;
8213
8462
  }
8214
- @media (width >= 1440px) {
8215
- .search-results-page-module-uE5NE .search-results-page-module-p6Qod {
8216
- grid-template-columns: auto 1fr;
8463
+
8464
+ .product-details-panel-module-MXfPm .product-details-panel-module-IbS9- {
8465
+ align-self: start;
8466
+ }
8467
+
8468
+ .product-details-panel-module-MXfPm .product-details-panel-module-wHZCr {
8469
+ display: flex;
8470
+ width: 100%;
8471
+ align-items: flex-end;
8472
+ justify-content: space-between;
8473
+ }
8474
+
8475
+ .product-details-panel-module-MXfPm .product-details-panel-module-wHZCr .product-details-panel-module-dI2JL {
8476
+ --price-toggle-size: var(--price-size-larger);
8217
8477
  }
8478
+
8479
+ .product-details-panel-module-MXfPm .product-details-panel-module-wHZCr .product-details-panel-module-QLafW {
8480
+ display: flex;
8481
+ align-items: center;
8482
+ }
8483
+
8484
+ .product-details-panel-module-MXfPm .product-details-panel-module-9L-Nm {
8485
+ margin-top: var(--space-12);
8486
+ color: var(--color-brand-dark-gray);
8487
+ font-size: 16px;
8488
+ font-stretch: normal;
8489
+ font-style: normal;
8490
+ font-weight: normal;
8491
+ letter-spacing: normal;
8492
+ line-height: 1.5;
8218
8493
  }
8219
8494
 
8220
- .sidebar-provider-module-rjeCL {
8221
- --transition-duration: 0;
8222
- }
8495
+ .product-details-panel-module-MXfPm .product-details-panel-module-9L-Nm p {
8496
+ margin: 0;
8497
+ }
8223
8498
 
8224
- .sidebar-provider-module-rjeCL.sidebar-provider-module-C0cKR {
8225
- --transition-duration: 0.3s;
8499
+ .product-details-panel-module-MXfPm .product-details-panel-module-NC2nx {
8500
+ margin-top: var(--space-16);
8501
+ margin-bottom: var(--space-24);
8226
8502
  }
8227
8503
 
8228
- .table-module-pevNG {
8229
- box-sizing: border-box;
8230
- container-name: table-container;
8231
- container-type: inline-size;
8232
- overflow-x: auto;
8504
+ .product-details-recently-viewed-section-module-cGFgH {
8505
+ display: flex;
8506
+ flex-direction: column;
8507
+ align-items: center;
8508
+ gap: var(--space-24);
8233
8509
  }
8234
8510
 
8235
- .table-module-k47fT {
8236
- --columns: 1;
8237
- --border-color: var(--color-gray-200);
8238
- --bgcolor-odd: var(--color-white);
8239
- --bgcolor-even: var(--color-gray-50);
8240
- --bgcolor-col-selected: rgb(0 0 0 / 5%);
8241
- --bgcolor-row-selected: rgb(0 0 0 / 10%);
8242
- --bgcolor-col-highlight: rgb(0 0 0 / 2.5%);
8243
- --bgcolor-row-highlight: rgb(0 0 0 / 2.5%);
8244
- --cell-padding: var(--space-12);
8245
- --grid-columns-default: repeat(var(--columns), minmax(min-content, auto));
8246
- --shadow: rgb(0 0 0 / 12.5%);
8247
- --z-column: 10;
8248
- --z-sticky: 11;
8249
- --z-selected: 12;
8511
+ & .promo-banner-module-yuVEO {
8512
+ position: relative;
8513
+ display: block;
8514
+ height: 122px;
8515
+ outline: none;
8516
+ }
8250
8517
 
8251
- @property --columns {
8252
- initial-value: 1;
8253
- syntax: '<integer>';
8518
+ & .promo-banner-module-yuVEO.promo-banner-module-ut8Kd {
8519
+ width: 250px;
8254
8520
  }
8255
8521
 
8256
- position: relative;
8257
- display: grid;
8258
- box-sizing: border-box;
8259
- align-content: flex-end;
8260
- padding: 0;
8261
- background: var(--color-white);
8262
- grid-template-columns: var(--grid-columns, var(--grid-columns-default));
8263
- grid-template-rows:
8264
- [clmns-start thead-start]
8265
- auto
8266
- [thead-end tbody-start]
8267
- auto
8268
- [tbody-end clmns-end];
8269
- line-height: 1.25;
8270
- max-inline-size: -moz-fit-content;
8271
- max-inline-size: fit-content;
8522
+ & .promo-banner-module-yuVEO.promo-banner-module-CSkIw {
8523
+ width: 310px;
8524
+ }
8272
8525
 
8273
- /* column highlighting (just 10 columns) */
8274
- }
8526
+ & .promo-banner-module-yuVEO picture {
8527
+ width: 100%;
8528
+ }
8275
8529
 
8276
- /* columns */
8530
+ & .promo-banner-module-yuVEO picture img {
8531
+ width: 100%;
8532
+ }
8277
8533
 
8278
- .table-module-k47fT .table-module-1lgqE {
8279
- display: grid;
8280
- grid-column: 1 / -1;
8281
- grid-row: clmns;
8282
- grid-template-columns: subgrid;
8534
+ & .promo-banner-module-yuVEO:focus-visible::after {
8535
+ position: absolute;
8536
+ display: block;
8537
+ background-color: transparent;
8538
+ box-shadow: var(--shadow-focus-outline) inset;
8539
+ content: '';
8540
+ inset: 0;
8283
8541
  pointer-events: none;
8542
+ -webkit-user-select: none;
8543
+ -moz-user-select: none;
8544
+ user-select: none;
8284
8545
  }
8285
8546
 
8286
- .table-module-k47fT .table-module-dISOo {
8287
- position: relative;
8288
- z-index: var(--z-column);
8547
+ @media (width >= 768px) {
8548
+ & .promo-banner-module-yuVEO {
8549
+ height: 230px;
8289
8550
  }
8290
8551
 
8291
- .table-module-k47fT .table-module-dISOo.table-module-WGz-I {
8292
- background-blend-mode: multiply;
8293
- background-color: var(--bgcolor-col-selected);
8552
+ & .promo-banner-module-yuVEO.promo-banner-module-CSkIw,
8553
+ & .promo-banner-module-yuVEO.promo-banner-module-ut8Kd {
8554
+ width: auto;
8294
8555
  }
8556
+ }
8295
8557
 
8296
- .table-module-k47fT .table-module-dISOo.table-module-PQejy {
8297
- position: sticky;
8298
- z-index: var(--z-selected);
8299
- container-name: sticky-column;
8300
- /* stylelint-disable-next-line declaration-property-value-no-unknown */
8301
- container-type: scroll-state;
8302
- inset-inline: 0;
8303
- }
8558
+ .promo-banners-module-uVyxh {
8559
+ margin-bottom: var(--space-24);
8560
+ }
8304
8561
 
8305
- .table-module-k47fT .table-module-dISOo.table-module-PQejy::before,
8306
- .table-module-k47fT .table-module-dISOo.table-module-PQejy::after {
8307
- position: absolute;
8308
- background: linear-gradient(-90deg, var(--shadow) 0%, transparent 100%);
8309
- content: '';
8310
- inline-size: var(--space-8);
8311
- inset-block: 0;
8312
- opacity: 0;
8313
- transition: opacity var(--transition-duration-short);
8314
- }
8562
+ @media (width >= 768px) {
8563
+ .promo-banners-module-uVyxh {
8564
+ display: grid;
8565
+ margin-bottom: var(--space-32);
8566
+ gap: var(--space-16);
8567
+ grid-template-columns: 2fr 1fr;
8568
+ }
8569
+ }
8315
8570
 
8316
- @supports not (container-type: scroll-state) {
8571
+ @media (width >= 1440px) {
8572
+ .promo-banners-module-uVyxh {
8573
+ gap: var(--space-24);
8574
+ grid-template-columns: 1.5fr 1fr;
8575
+ }
8576
+ }
8317
8577
 
8318
- .table-module-k47fT .table-module-dISOo.table-module-PQejy::before,
8319
- .table-module-k47fT .table-module-dISOo.table-module-PQejy::after {
8320
- background: var(--shadow);
8321
- inline-size: 1px;
8322
- opacity: 1
8323
- }
8324
- }
8578
+ .sidebar-module-fSa9Q.sidebar-module-AIq0M {
8579
+ --transition-timing-function: ease-in-out;
8325
8580
 
8326
- .table-module-k47fT .table-module-dISOo.table-module-PQejy::before {
8327
- inset-inline: auto 100%;
8328
- }
8581
+ position: fixed;
8582
+ z-index: calc(var(--sidebar-layer) + 1);
8583
+ top: 0;
8584
+ left: 0;
8585
+ width: 382px;
8586
+ max-width: 100vw;
8587
+ height: 100%;
8588
+ box-sizing: border-box;
8589
+ padding-top: 46px;
8590
+ padding-bottom: 56px;
8591
+ background: var(--color-white);
8592
+ }
8329
8593
 
8330
- @container sticky-column scroll-state(stuck: inline-end) {
8594
+ .sidebar-module-fSa9Q.sidebar-module-AIq0M.sidebar-module-LEZgg {
8595
+ transition: transform var(--transition-duration)
8596
+ var(--transition-timing-function);
8597
+ }
8331
8598
 
8332
- .table-module-k47fT .table-module-dISOo.table-module-PQejy::before {
8333
- opacity: 1
8334
- }
8335
- }
8599
+ .sidebar-module-fSa9Q.sidebar-module-AIq0M.sidebar-module-lV7wp {
8600
+ box-shadow: var(--box-shadow-heavy);
8601
+ pointer-events: auto;
8602
+ transform: translateX(0);
8603
+ }
8336
8604
 
8337
- .table-module-k47fT .table-module-dISOo.table-module-PQejy::after {
8338
- inset-inline: 100% auto;
8339
- rotate: 180deg;
8340
- }
8605
+ .sidebar-module-fSa9Q.sidebar-module-AIq0M.sidebar-module-dGDrr {
8606
+ box-shadow: none;
8607
+ pointer-events: none;
8608
+ transform: translateX(-100%);
8609
+ }
8610
+
8611
+ .sidebar-module-fSa9Q.sidebar-module-AIq0M .sidebar-module-2puGC {
8612
+ position: absolute;
8613
+ z-index: calc(var(--sidebar-layer) + 2);
8614
+ top: 36px;
8615
+ right: 8px;
8616
+ }
8341
8617
 
8342
- @container sticky-column scroll-state(stuck: inline-start) {
8618
+ .sidebar-module-fSa9Q.sidebar-module-AIq0M .sidebar-module-2puGC svg {
8619
+ display: block;
8620
+ width: 32px;
8621
+ height: 32px;
8622
+ }
8343
8623
 
8344
- .table-module-k47fT .table-module-dISOo.table-module-PQejy::after {
8345
- opacity: 1
8346
- }
8347
- }
8624
+ .sidebar-module-fSa9Q.sidebar-module-AIq0M .sidebar-module-2puGC button {
8625
+ -webkit-tap-highlight-color: transparent;
8626
+ }
8348
8627
 
8349
- /* cells */
8628
+ .sidebar-module-fSa9Q.sidebar-module-Scw7D {
8629
+ --transition-timing-function: ease-in-out;
8350
8630
 
8351
- .table-module-k47fT .table-module-jRXnY,
8352
- .table-module-k47fT .table-module-wJwSq {
8353
- overflow: hidden;
8354
- box-sizing: border-box;
8355
- padding: var(--cell-padding);
8356
- text-wrap: balance;
8631
+ position: static;
8632
+ z-index: initial;
8633
+ overflow: hidden;
8634
+ width: 0;
8635
+ padding: 0;
8636
+ transform: translateX(0);
8637
+ white-space: nowrap;
8638
+ }
8639
+
8640
+ .sidebar-module-fSa9Q.sidebar-module-Scw7D.sidebar-module-LEZgg {
8641
+ transition:
8642
+ width var(--transition-duration) var(--transition-timing-function),
8643
+ transform var(--transition-duration) var(--transition-timing-function);
8357
8644
  }
8358
8645
 
8359
- .table-module-k47fT .table-module-jRXnY.table-module-EWdty, .table-module-k47fT .table-module-wJwSq.table-module-EWdty {
8360
- text-align: start;
8361
- }
8646
+ .sidebar-module-fSa9Q.sidebar-module-Scw7D.sidebar-module-lV7wp {
8647
+ width: 324px;
8648
+ box-shadow: none;
8649
+ }
8362
8650
 
8363
- .table-module-k47fT .table-module-jRXnY.table-module-yJD74, .table-module-k47fT .table-module-wJwSq.table-module-yJD74 {
8364
- text-align: end;
8365
- }
8651
+ .sidebar-module-fSa9Q.sidebar-module-Scw7D.sidebar-module-dGDrr {
8652
+ transform: translateX(0);
8653
+ }
8366
8654
 
8367
- .table-module-k47fT .table-module-jRXnY.table-module-XAdfy, .table-module-k47fT .table-module-wJwSq.table-module-XAdfy {
8368
- text-align: center;
8369
- }
8655
+ .sidebar-module-fSa9Q.sidebar-module-Scw7D .sidebar-module-2puGC {
8656
+ display: none;
8657
+ }
8370
8658
 
8371
- .table-module-k47fT .table-module-jRXnY.table-module-h7qdo, .table-module-k47fT .table-module-wJwSq.table-module-h7qdo {
8372
- text-wrap: nowrap;
8659
+ .product-listing-page-module-U0zLZ .product-listing-page-module-9a0ps {
8660
+ margin-bottom: 44px;
8661
+ }
8662
+ .product-listing-page-module-U0zLZ .product-listing-page-module-VvYG3 {
8663
+ margin-bottom: var(--space-24);
8664
+ }
8665
+ .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo {
8666
+ display: grid;
8667
+ gap: var(--space-16);
8668
+ justify-items: center;
8669
+ }
8670
+ .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-qhR-J,
8671
+ .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3LRKg {
8672
+ width: 100%;
8373
8673
  }
8374
-
8375
- .table-module-k47fT .table-module-jRXnY.table-module-PQejy, .table-module-k47fT .table-module-wJwSq.table-module-PQejy {
8376
- position: sticky;
8377
- z-index: var(--z-sticky);
8378
- inset-inline: 0;
8674
+ .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-qhR-J > *, .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3LRKg > * {
8675
+ display: flex;
8676
+ width: 100%;
8677
+ justify-content: center;
8678
+ }
8679
+ .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3Jtw- {
8680
+ order: 2;
8379
8681
  }
8380
-
8381
- /* rows */
8382
-
8383
- .table-module-k47fT .table-module-Nisf1 {
8682
+ .product-listing-page-module-U0zLZ .product-listing-page-module-UwMEE {
8683
+ margin-bottom: var(--space-44);
8684
+ }
8685
+ .product-listing-page-module-U0zLZ .product-listing-page-module-cUe4a {
8384
8686
  display: grid;
8385
- border-block-end: 1px solid var(--border-color);
8386
- grid-column: 1 / -1;
8387
- grid-template-columns: subgrid;
8388
- grid-template-rows: subgrid;
8687
+ grid-template-columns: 1fr;
8389
8688
  }
8390
-
8391
- .table-module-k47fT .table-module-Nisf1 .table-module-jRXnY,
8392
- .table-module-k47fT .table-module-Nisf1 .table-module-wJwSq {
8393
- background-color: var(--bgcolor-odd);
8689
+ .product-listing-page-module-U0zLZ .product-listing-page-module-dtbXB {
8690
+ display: flex;
8691
+ flex-direction: column;
8692
+ }
8693
+ .product-listing-page-module-U0zLZ .product-listing-page-module-zKOQv {
8694
+ margin-top: var(--space-24);
8695
+ grid-column: span 2;
8696
+ }
8697
+ @media (width >= 768px) {
8698
+ .product-listing-page-module-U0zLZ .product-listing-page-module-UwMEE {
8699
+ margin-bottom: var(--space-64);
8394
8700
  }
8395
8701
 
8396
- .table-module-k47fT .table-module-Nisf1:nth-child(even) .table-module-jRXnY,
8397
- .table-module-k47fT .table-module-Nisf1:nth-child(even) .table-module-wJwSq {
8398
- background-color: var(--bgcolor-even);
8399
- }
8702
+ .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo {
8703
+ display: grid;
8704
+ align-items: center;
8705
+ justify-content: space-between;
8706
+ margin-bottom: var(--space-24);
8707
+ grid-template-columns: repeat(3, 1fr);
8708
+ row-gap: var(--space-8);
8709
+ }
8400
8710
 
8401
- :has(.table-module-3zZB6) .table-module-k47fT .table-module-Nisf1::after {
8402
- z-index: var(--z-selected);
8403
- background-blend-mode: multiply;
8404
- background-color: var(--bgcolor-row-highlight);
8405
- content: '';
8406
- grid-column: 1 / -1;
8407
- opacity: 0;
8408
- pointer-events: none;
8711
+ .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-qhR-J,
8712
+ .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3LRKg {
8713
+ width: initial;
8409
8714
  }
8410
8715
 
8411
- @media (pointer: fine) {
8716
+ .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-qhR-J > *, .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3LRKg > * {
8717
+ width: initial;
8718
+ }
8412
8719
 
8413
- :has(.table-module-3zZB6) .table-module-k47fT .table-module-Nisf1:hover::after {
8414
- opacity: 1
8720
+ .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-qhR-J {
8721
+ justify-self: flex-start;
8415
8722
  }
8416
- }
8417
8723
 
8418
- .table-module-k47fT .table-module-Nisf1.table-module-WGz-I::after {
8419
- z-index: var(--z-selected);
8420
- background-blend-mode: multiply;
8421
- background-color: var(--bgcolor-row-selected);
8422
- content: '';
8423
- grid-column: 1 / -1;
8424
- opacity: 1;
8425
- pointer-events: none;
8724
+ .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3LRKg {
8725
+ display: flex;
8726
+ justify-self: flex-end;
8426
8727
  }
8427
8728
 
8428
- .table-module-k47fT .table-module-Nisf1.table-module-qRfjM {
8429
- cursor: pointer;
8729
+ .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3Jtw- {
8730
+ order: initial;
8731
+ margin: auto;
8732
+ }
8733
+ }
8734
+ @media (width >= 1440px) {
8735
+ .product-listing-page-module-U0zLZ .product-listing-page-module-cUe4a {
8736
+ grid-template-columns: auto 1fr;
8430
8737
  }
8738
+ }
8431
8739
 
8432
- /* table header */
8433
-
8434
- .table-module-k47fT .table-module-DK-wn {
8740
+ .search-results-page-module-uE5NE .search-results-page-module-grXkv {
8741
+ margin-bottom: 44px;
8742
+ }
8743
+ .search-results-page-module-uE5NE .search-results-page-module--GBRi {
8435
8744
  display: grid;
8436
- grid-column: 1 / -1;
8437
- grid-row: thead;
8438
- grid-template-columns: subgrid;
8745
+ gap: var(--space-16);
8746
+ justify-items: center;
8439
8747
  }
8440
-
8441
- .table-module-k47fT .table-module-DK-wn .table-module-Nisf1 {
8442
- border-block-start: 0;
8748
+ .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-7G8Fo,
8749
+ .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-MzRkN {
8750
+ width: 100%;
8443
8751
  }
8444
-
8445
- .table-module-k47fT .table-module-DK-wn .table-module-Nisf1 .table-module-jRXnY,
8446
- .table-module-k47fT .table-module-DK-wn .table-module-Nisf1 .table-module-wJwSq {
8447
- background-color: var(--bgcolor-even);
8448
- font-weight: var(--font-weight-bold);
8752
+ .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-7G8Fo > *, .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-MzRkN > * {
8753
+ display: flex;
8754
+ width: 100%;
8755
+ justify-content: center;
8449
8756
  }
8450
-
8451
- /* table body */
8452
-
8453
- .table-module-k47fT .table-module-tygZb {
8757
+ .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-rhDU1 {
8758
+ order: 2;
8759
+ }
8760
+ .search-results-page-module-uE5NE .search-results-page-module-uxlXw {
8761
+ margin-bottom: var(--space-44);
8762
+ }
8763
+ .search-results-page-module-uE5NE .search-results-page-module-p6Qod {
8454
8764
  display: grid;
8455
- grid-column: 1 / -1;
8456
- grid-row: tbody;
8457
- grid-template-columns: subgrid;
8765
+ grid-template-columns: 1fr;
8458
8766
  }
8459
-
8460
- /* full width table */
8461
-
8462
- .table-module-k47fT.table-module-YnmWV {
8463
- min-inline-size: 100%;
8767
+ .search-results-page-module-uE5NE .search-results-page-module-7T07c {
8768
+ display: flex;
8769
+ flex-direction: column;
8464
8770
  }
8465
-
8466
- .table-module-k47fT.table-module-YnmWV .table-module-skhNZ {
8467
- text-align: start;
8468
- }
8469
-
8470
- /* no text wrap for entire table */
8471
-
8472
- .table-module-k47fT.table-module-h7qdo .table-module-Nisf1 .table-module-jRXnY,
8473
- .table-module-k47fT.table-module-h7qdo .table-module-Nisf1 .table-module-wJwSq {
8474
- text-wrap: nowrap;
8475
- }
8476
-
8477
- @media (pointer: fine) {
8478
-
8479
- .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(1):hover) .table-module-dISOo:nth-child(1),
8480
- .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(2):hover) .table-module-dISOo:nth-child(2),
8481
- .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(3):hover) .table-module-dISOo:nth-child(3),
8482
- .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(4):hover) .table-module-dISOo:nth-child(4),
8483
- .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(5):hover) .table-module-dISOo:nth-child(5),
8484
- .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(6):hover) .table-module-dISOo:nth-child(6),
8485
- .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(7):hover) .table-module-dISOo:nth-child(7),
8486
- .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(8):hover) .table-module-dISOo:nth-child(8),
8487
- .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(9):hover) .table-module-dISOo:nth-child(9),
8488
- .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(10):hover) .table-module-dISOo:nth-child(10) {
8489
- background-blend-mode: multiply;
8490
- background-color: var(--bgcolor-col-highlight)
8771
+ .search-results-page-module-uE5NE .search-results-page-module-zcJy7 {
8772
+ margin-top: var(--space-24);
8773
+ grid-column: span 2;
8491
8774
  }
8775
+ @media (width >= 768px) {
8776
+ .search-results-page-module-uE5NE .search-results-page-module-uxlXw {
8777
+ margin-bottom: var(--space-64);
8492
8778
  }
8493
8779
 
8494
- /* table sort buttons */
8495
-
8496
- .table-module-RtOV- {
8497
- --icon-space: 24px;
8498
- --icon-size: 12px;
8499
- --icon-rotation: 0deg;
8500
- --icon-visibility: hidden;
8501
-
8502
- all: unset;
8503
- display: grid;
8504
- align-items: baseline;
8505
- padding: var(--cell-padding);
8506
- cursor: pointer;
8507
- grid-template-areas: 'label icon .';
8508
- grid-template-columns: auto var(--icon-space) 1fr;
8509
- inline-size: 100%;
8510
- text-align: start;
8511
- }
8512
-
8513
- .table-module-RtOV- .table-module-ukG8s {
8514
- grid-area: label;
8515
- }
8780
+ .search-results-page-module-uE5NE .search-results-page-module--GBRi {
8781
+ display: grid;
8782
+ align-items: center;
8783
+ justify-content: space-between;
8784
+ margin-bottom: var(--space-24);
8785
+ grid-template-columns: repeat(3, 1fr);
8786
+ row-gap: var(--space-8);
8787
+ }
8516
8788
 
8517
- .table-module-RtOV- .table-module-QdiLJ {
8518
- grid-area: icon;
8519
- justify-self: center;
8520
- rotate: var(--icon-rotation);
8521
- visibility: var(--icon-visibility);
8522
- }
8789
+ .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-7G8Fo,
8790
+ .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-MzRkN {
8791
+ width: initial;
8792
+ }
8523
8793
 
8524
- .table-module-RtOV-.table-module-gWy-a {
8525
- --icon-visibility: visible;
8526
- }
8794
+ .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-7G8Fo > *, .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-MzRkN > * {
8795
+ width: initial;
8796
+ }
8527
8797
 
8528
- .table-module-RtOV-.table-module-SjJ57 {
8529
- --icon-rotation: 0deg;
8530
- }
8798
+ .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-7G8Fo {
8799
+ justify-self: flex-start;
8800
+ }
8531
8801
 
8532
- .table-module-RtOV-.table-module--p8TF {
8533
- --icon-rotation: 180deg;
8534
- }
8802
+ .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-MzRkN {
8803
+ display: flex;
8804
+ justify-self: flex-end;
8805
+ }
8535
8806
 
8536
- .table-module-RtOV-.table-module-XAdfy {
8537
- grid-template-areas: '. . label icon .';
8538
- grid-template-columns: 1fr var(--icon-space) auto var(--icon-space) 1fr;
8539
- text-align: center;
8807
+ .search-results-page-module-uE5NE .search-results-page-module--GBRi .search-results-page-module-rhDU1 {
8808
+ order: initial;
8809
+ margin: auto;
8810
+ }
8540
8811
  }
8541
-
8542
- .table-module-RtOV-.table-module-yJD74 {
8543
- grid-template-areas: '. icon label';
8544
- grid-template-columns: 1fr var(--icon-space) auto;
8545
- text-align: end;
8812
+ @media (width >= 1440px) {
8813
+ .search-results-page-module-uE5NE .search-results-page-module-p6Qod {
8814
+ grid-template-columns: auto 1fr;
8815
+ }
8546
8816
  }
8547
8817
 
8548
- .table-module-DK-wn .table-module-RtOV- {
8549
- margin: calc(var(--cell-padding) * -1);
8550
- }
8551
-
8552
- .truncated-module-bwo1A {
8553
- display: -webkit-box;
8554
- text-wrap: balance;
8818
+ .sidebar-provider-module-rjeCL {
8819
+ --transition-duration: 0;
8555
8820
  }
8556
8821
 
8557
- .truncated-module-bwo1A.truncated-module-JHMUL {
8558
- overflow: hidden;
8559
- -webkit-box-orient: vertical;
8560
- -webkit-line-clamp: var(--lines, 1);
8561
- line-clamp: var(--lines, 1);
8562
- text-overflow: ellipsis;
8822
+ .sidebar-provider-module-rjeCL.sidebar-provider-module-C0cKR {
8823
+ --transition-duration: 0.3s;
8563
8824
  }
8564
8825
 
8565
- .data-table-module-7CcZR {
8566
- display: flex;
8567
- flex-direction: column;
8568
- gap: var(--space-16);
8569
- }
8570
-
8571
8826
  :root {
8572
8827
  --toastify-color-light: #fff;
8573
8828
  --toastify-color-dark: #121212;