@sc-360-v2/storefront-cms-library 0.4.49 → 0.4.51

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 (183) hide show
  1. package/dist/add-existing-form.scss +66 -66
  2. package/dist/add-order.scss +377 -377
  3. package/dist/add-products-tab copy.scss +1132 -1132
  4. package/dist/add-products-tab-details.scss +3818 -0
  5. package/dist/add-products-tab.scss +142 -3052
  6. package/dist/allocationDetails.scss +2247 -2247
  7. package/dist/allocations.scss +1603 -1603
  8. package/dist/amount-estimator.scss +1083 -1083
  9. package/dist/animation-control.scss +23 -23
  10. package/dist/badge.scss +388 -388
  11. package/dist/brand-basic-elements.scss +292 -292
  12. package/dist/brand.scss +93 -93
  13. package/dist/breadcrumbs.scss +802 -802
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-order-pad.scss +677 -677
  16. package/dist/bulk-variant-picker copy.scss +1121 -1121
  17. package/dist/bulk-variant-picker.scss +3294 -3294
  18. package/dist/bundle copy.scss +2805 -2805
  19. package/dist/bundle.scss +2383 -2383
  20. package/dist/bundleDetails copy.scss +1431 -1431
  21. package/dist/bundleDetails.scss +3320 -3285
  22. package/dist/button copy.scss +271 -271
  23. package/dist/button.scss +292 -292
  24. package/dist/buy-for-tab-container.scss +90 -90
  25. package/dist/buy-for-tab.scss +3 -4
  26. package/dist/buy-for-tabs-container-item.scss +80 -80
  27. package/dist/buyForHeaders.scss +6718 -6718
  28. package/dist/buyForPopup.scss +70 -52
  29. package/dist/cart-details.scss +3207 -3207
  30. package/dist/cart-products-sidebar.scss +211 -211
  31. package/dist/cart-summary.scss +2728 -2728
  32. package/dist/cart-wrapper.scss +127 -127
  33. package/dist/cart.scss +269 -269
  34. package/dist/cartAttributes.scss +935 -935
  35. package/dist/cartDropdownOverlay.scss +513 -237
  36. package/dist/cartGrouping.scss +89 -89
  37. package/dist/category-groups-element.scss +138 -138
  38. package/dist/category.scss +73 -73
  39. package/dist/categoryDetails.scss +61 -61
  40. package/dist/categoryWidget.scss +34 -34
  41. package/dist/checkbox-radio.scss +124 -124
  42. package/dist/checkout.scss +6460 -6569
  43. package/dist/code-temp.scss +58 -58
  44. package/dist/colorpicker_v2.scss +52 -52
  45. package/dist/common-element.scss +35 -35
  46. package/dist/confirm-modal.scss +351 -351
  47. package/dist/confirmationModal.scss +139 -139
  48. package/dist/contact-us.scss +105 -105
  49. package/dist/container.scss +114 -114
  50. package/dist/countdown.scss +751 -751
  51. package/dist/coupon.scss +1254 -1254
  52. package/dist/custom-fonts.scss +100 -100
  53. package/dist/customization-tree.scss +160 -160
  54. package/dist/default-dropdown.scss +240 -240
  55. package/dist/dropdownTemplate.scss +57 -43
  56. package/dist/editCartItem.scss +111 -111
  57. package/dist/embed-temp.scss +72 -72
  58. package/dist/embroider-preview-element.scss +94 -94
  59. package/dist/embroider-template-1-v2.scss +937 -937
  60. package/dist/embroider-template-1.scss +482 -482
  61. package/dist/embroidery.scss +213 -213
  62. package/dist/employee-bulk-order.scss +4057 -4057
  63. package/dist/emtpy-templates.scss +165 -165
  64. package/dist/faq.scss +564 -564
  65. package/dist/fb-dropdown.scss +125 -125
  66. package/dist/filter-results.scss +323 -323
  67. package/dist/filters.scss +1 -1
  68. package/dist/flex-text-editor.scss +271 -271
  69. package/dist/form-preview.scss +290 -290
  70. package/dist/form-zindex-module.scss +24 -24
  71. package/dist/gallery-slider-temp.scss +1234 -1234
  72. package/dist/global-styles.scss +86 -86
  73. package/dist/grid.scss +119 -119
  74. package/dist/hotspot.scss +397 -397
  75. package/dist/icon-library.scss +74 -74
  76. package/dist/icon-list.scss +268 -268
  77. package/dist/image-for-product.scss +21 -21
  78. package/dist/image-temp.scss +168 -168
  79. package/dist/item-stock.scss +87 -87
  80. package/dist/language-selector.scss +528 -528
  81. package/dist/layouter-item.scss +89 -89
  82. package/dist/layouter-pro-item.scss +80 -80
  83. package/dist/layouter-pro.scss +88 -88
  84. package/dist/layouter.scss +294 -294
  85. package/dist/light-box-v2.scss +105 -105
  86. package/dist/lightbox.scss +78 -78
  87. package/dist/line.scss +166 -166
  88. package/dist/loader.scss +37 -37
  89. package/dist/login.scss +1473 -1473
  90. package/dist/map.scss +962 -962
  91. package/dist/marchandiserSets.scss +60 -60
  92. package/dist/mega-menu-container.scss +99 -99
  93. package/dist/mega-menu.scss +838 -838
  94. package/dist/menu-item.scss +19 -19
  95. package/dist/menu-v2.scss +730 -730
  96. package/dist/menu.scss +162 -162
  97. package/dist/modal.scss +2267 -2267
  98. package/dist/multi-select-dropdown.scss +282 -279
  99. package/dist/my-templates.scss +463 -463
  100. package/dist/my-wishlist.scss +17 -17
  101. package/dist/option-bar.scss +845 -845
  102. package/dist/order-processing.scss +61 -61
  103. package/dist/order-status.scss +1856 -1856
  104. package/dist/overflow-module.scss +63 -63
  105. package/dist/past-orders.scss +975 -975
  106. package/dist/payment-methods.scss +289 -289
  107. package/dist/pickup-locations.scss +1167 -1167
  108. package/dist/position-module.scss +95 -95
  109. package/dist/prefix-list.scss +86 -86
  110. package/dist/product-actions copy.scss +2765 -2765
  111. package/dist/product-actions.scss +2286 -2286
  112. package/dist/product-basic-elements.scss +770 -770
  113. package/dist/product-customizations.scss +149 -149
  114. package/dist/product-highlights copy.scss +217 -217
  115. package/dist/product-highlights.scss +311 -311
  116. package/dist/product-image copy.scss +787 -787
  117. package/dist/product-image-bundles.scss +1512 -0
  118. package/dist/product-image.scss +1 -1
  119. package/dist/product-inventory.scss +1378 -1378
  120. package/dist/product-options.scss +1144 -1144
  121. package/dist/product-price.scss +2598 -2598
  122. package/dist/product-promotions.scss +2759 -2759
  123. package/dist/product-sizechart.scss +1826 -1826
  124. package/dist/product.scss +97 -97
  125. package/dist/productDetails.scss +70 -70
  126. package/dist/profile.scss +3 -2
  127. package/dist/quantity-selector.scss +3 -2
  128. package/dist/quick-links.scss +552 -552
  129. package/dist/quick-order-pad.scss +237 -237
  130. package/dist/quota-details.scss +263 -263
  131. package/dist/quotes.scss +737 -737
  132. package/dist/repeater copy.scss +635 -635
  133. package/dist/repeater-embla-controls.scss +6 -3
  134. package/dist/repeater-grid-toggle.scss +58 -58
  135. package/dist/repeater-item.scss +90 -90
  136. package/dist/repeater.scss +915 -915
  137. package/dist/request-for-quotes.scss +746 -746
  138. package/dist/responsive-behaviour.scss +29 -29
  139. package/dist/rfqs.scss +736 -736
  140. package/dist/scroll.scss +222 -222
  141. package/dist/search-results-heading.scss +279 -279
  142. package/dist/search.scss +296 -296
  143. package/dist/section.scss +2 -1
  144. package/dist/shareCartSideBar.scss +254 -254
  145. package/dist/shipping-estimator.scss +41 -41
  146. package/dist/shipping-payments.scss +2467 -2467
  147. package/dist/simple-list.scss +259 -259
  148. package/dist/skeleton.scss +74 -74
  149. package/dist/social.scss +276 -276
  150. package/dist/sort.scss +89 -89
  151. package/dist/spotlight.scss +1663 -1663
  152. package/dist/stack.scss +129 -129
  153. package/dist/static-global.scss +167 -0
  154. package/dist/static-text.scss +52 -52
  155. package/dist/stockStatus.scss +64 -64
  156. package/dist/store-locations.scss +1398 -1398
  157. package/dist/sub-category.scss +74 -74
  158. package/dist/submit-quote.scss +275 -275
  159. package/dist/tab-container-item.scss +80 -80
  160. package/dist/tab-container.scss +89 -89
  161. package/dist/tab-v2.scss +583 -583
  162. package/dist/table-common.scss +506 -506
  163. package/dist/table.scss +685 -685
  164. package/dist/tabs.scss +395 -395
  165. package/dist/text-temp-v2.scss +139 -139
  166. package/dist/text-temp.scss +109 -109
  167. package/dist/theme-classes.scss +296 -296
  168. package/dist/toaster.scss +350 -350
  169. package/dist/toggle-button.scss +32 -32
  170. package/dist/transform-properties-module.scss +20 -20
  171. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +1790 -441
  172. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +9 -0
  173. package/dist/uom-selector.scss +1169 -1169
  174. package/dist/user-elements copy.scss +1437 -1437
  175. package/dist/user-elements.scss +2471 -2471
  176. package/dist/variant-picker.scss +2384 -2384
  177. package/dist/video.scss +476 -476
  178. package/dist/volume-pricing copy 2.scss +1468 -1468
  179. package/dist/volume-pricing copy.scss +1077 -1077
  180. package/dist/volume-pricing.scss +1175 -1175
  181. package/dist/widget.scss +148 -148
  182. package/dist/wishlist-overlay.scss +48 -48
  183. package/package.json +1 -1
package/dist/add-products-tab.scss CHANGED
@@ -12,6 +12,10 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
12
12
  }
13
13
  [data-div-type="element"] {
14
14
  &[data-element-type="addProductsTab"] {
15
+ // Import additional styles from partial file
16
+ @import "./add-products-tab-details";
17
+ @import "./product-image-bundles.scss";
18
+
15
19
  // width: var(
16
20
  // --_sf-el-wh-st-mx,
17
21
  // calc(
@@ -26,13 +30,13 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
26
30
  & > div {
27
31
  &.wrapper {
28
32
  width: 100%;
29
- &:has(.buyfor_content_loader) {
30
- display: flex;
31
- justify-content: center;
32
- align-items: center;
33
- width: 100%;
34
- height: calc(100vh - 270px);
35
- }
33
+ // &:has(.buyfor_content_loader) {
34
+ // display: flex;
35
+ // justify-content: center;
36
+ // align-items: center;
37
+ // width: 100%;
38
+ // height: 100%;
39
+ // }
36
40
  }
37
41
  }
38
42
 
@@ -40,6 +44,8 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
40
44
  display: flex;
41
45
  flex-direction: column;
42
46
  align-items: center;
47
+ justify-content: center;
48
+ min-height: 350px;
43
49
  .spinner_sm {
44
50
  border: 4px solid var(--_gray-200);
45
51
  border-top: 4px solid var(--_thm-cs-at-py);
@@ -81,7 +87,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
81
87
  justify-content: space-between;
82
88
  align-items: center;
83
89
  border-bottom: 1px solid var(--_thm-cs-be-se-3);
84
- padding-bottom: 16px;
90
+ padding-bottom: 24px;
85
91
  .section-title {
86
92
  font-size: var(
87
93
  --_ctm-mob-dn-hr-te-ft-se,
@@ -115,7 +121,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
115
121
  align-items: center;
116
122
  border: 1px solid var(--_gray-300);
117
123
  border-radius: 4px;
118
- padding: 8px 12px;
124
+ padding: 12px;
119
125
  background: transparent;
120
126
  // height: 40px;
121
127
  transition:
@@ -131,6 +137,11 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
131
137
  margin-right: 8px;
132
138
  color: var(--_thm-cs-be-se-3);
133
139
  }
140
+ .close-icon {
141
+ svg {
142
+ height: 12px;
143
+ }
144
+ }
134
145
 
135
146
  input {
136
147
  border: none;
@@ -150,12 +161,13 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
150
161
  }
151
162
  }
152
163
  }
153
-
164
+ .buyforcart_empty_wrp {
165
+ height: 300px;
166
+ }
154
167
  .add-product-wrapper {
155
168
  display: grid;
156
169
  grid-template-columns: 1fr 1fr;
157
- gap: 48px;
158
- padding-top: 16px;
170
+ // gap: 48px;
159
171
  &:has(.empty_template) {
160
172
  display: flex;
161
173
  padding: 48px;
@@ -242,9 +254,11 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
242
254
  // grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
243
255
  grid-template-columns: 1fr 1fr;
244
256
  gap: 16px;
245
- max-height: 750px;
257
+ max-height: 900px;
246
258
  overflow-y: auto;
247
259
  overflow-x: hidden;
260
+ padding: 24px 24px 24px 0;
261
+ background-color: var(--_base-white);
248
262
 
249
263
  @media (max-width: 500px) {
250
264
  grid-template-columns: 1fr;
@@ -253,7 +267,11 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
253
267
  .product-card {
254
268
  display: flex;
255
269
  flex-direction: column;
270
+ }
271
+ .product-card,
272
+ .tile {
256
273
  gap: 24px;
274
+ transition: background border 400ms ease-in-out;
257
275
  // padding: 16px;
258
276
  // background-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-bd-cr);
259
277
  @include BgColorLighter(var(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-bd-cr), 5%);
@@ -571,9 +589,9 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
571
589
  }
572
590
  .add-product-list-details {
573
591
  // border-left: 1px solid var(--_thm-cs-be-se-3);
574
- border-color: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-br-cr);
575
- border-width: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-br-wh);
576
- border-style: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-br-se);
592
+ border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-cr);
593
+ border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-wh);
594
+ border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-se);
577
595
  }
578
596
  .customizer-panel {
579
597
  display: flex;
@@ -581,13 +599,13 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
581
599
  // gap: 12px;
582
600
  // border-left: 0.5px solid #d0d5dd;
583
601
  // padding-left: 48px;
584
- padding: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-pg);
585
- gap: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-im-gp);
586
- border-radius: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-br-rs);
587
- background-color: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-bd-cr);
588
- // border-color: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-br-cr);
589
- // border-width: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-br-wh);
590
- // border-style: prepareMediaVariable(--_ctm-dn-pt-ds-pt-ds-wt-br-se);
602
+ padding: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-pg);
603
+ gap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-im-gp);
604
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-rs);
605
+ background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-bd-cr);
606
+ // border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-cr);
607
+ // border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-wh);
608
+ // border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-se);
591
609
 
592
610
  .product-header {
593
611
  display: flex;
@@ -659,156 +677,6 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
659
677
  }
660
678
  }
661
679
 
662
- .price-options {
663
- display: flex;
664
- align-items: center;
665
-
666
- .price {
667
- display: flex;
668
- flex-direction: column;
669
-
670
- .amount {
671
- font-family: var(
672
- --_ctm-mob-dn-pt-ds-pt-pe-ft-fy,
673
- var(--_ctm-tab-dn-pt-ds-pt-pe-ft-fy, var(--_ctm-dn-pt-ds-pt-pe-ft-fy))
674
- );
675
- font-size: var(
676
- --_ctm-mob-dn-pt-ds-pt-pe-ft-se,
677
- var(--_ctm-tab-dn-pt-ds-pt-pe-ft-se, var(--_ctm-dn-pt-ds-pt-pe-ft-se))
678
- );
679
- font-weight: var(
680
- --_ctm-mob-dn-pt-ds-pt-pe-ft-wt,
681
- var(--_ctm-tab-dn-pt-ds-pt-pe-ft-wt, var(--_ctm-dn-pt-ds-pt-pe-ft-wt))
682
- );
683
- color: var(
684
- --_ctm-mob-dn-pt-ds-pt-pe-cr,
685
- var(--_ctm-tab-dn-pt-ds-pt-pe-cr, var(--_ctm-dn-pt-ds-pt-pe-cr))
686
- );
687
- line-height: var(
688
- --_ctm-mob-dn-pt-ds-pt-pe-le-ht,
689
- var(--_ctm-tab-dn-pt-ds-pt-pe-le-ht, var(--_ctm-dn-pt-ds-pt-pe-le-ht))
690
- );
691
- letter-spacing: var(
692
- --_ctm-mob-dn-pt-ds-pt-pe-lr-sg,
693
- var(--_ctm-tab-dn-pt-ds-pt-pe-lr-sg, var(--_ctm-dn-pt-ds-pt-pe-lr-sg))
694
- );
695
- // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
696
- // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
697
- padding: var(
698
- --_ctm-dn-mob-pt-ds-pt-pe-pg,
699
- var(--_ctm-tab-dn-pt-ds-pt-pe-pg, var(--_ctm-dn-pt-ds-pt-pe-pg))
700
- );
701
- }
702
-
703
- .note {
704
- font-family: "Lato";
705
- font-weight: 500;
706
- font-size: 16px;
707
- line-height: 24px;
708
- color: var(--_success-700);
709
- }
710
- }
711
- }
712
-
713
- .color-options {
714
- display: flex;
715
- flex-direction: column;
716
- margin-top: 12px;
717
- gap: 6px;
718
-
719
- label {
720
- font-family: "Lato";
721
- font-weight: 600;
722
- font-size: 16px;
723
- line-height: 24px;
724
- color: var(--_gray-600);
725
- }
726
- .colors {
727
- display: flex;
728
- flex-wrap: wrap;
729
- gap: 6px;
730
-
731
- .color-circle {
732
- width: 28px;
733
- height: 28px;
734
- border-radius: 50%;
735
- cursor: pointer;
736
-
737
- &.selected {
738
- width: 50px;
739
- height: 28px;
740
- border-radius: 100px;
741
- //border: 0.5px solid var(--_gray-600);
742
- //padding: 6px 5px;
743
- }
744
- .color-code {
745
- width: 28px;
746
- height: 28px;
747
- border-radius: 50%;
748
- cursor: pointer;
749
- &.selected {
750
- width: 50px;
751
- height: 28px;
752
- border-radius: 100px;
753
- border: 0.5px solid var(--_gray-600);
754
- padding: 6px 5px;
755
- }
756
- }
757
- }
758
- }
759
- }
760
-
761
- .fit-size-options {
762
- display: flex;
763
- flex-direction: column;
764
- margin-top: 20px;
765
- gap: 2rem;
766
-
767
- .select_fit,
768
- .fit,
769
- .size {
770
- display: flex;
771
- flex-direction: column;
772
- gap: 6px;
773
-
774
- label {
775
- font-family: "Lato";
776
- font-weight: 600;
777
- font-size: 16px;
778
- line-height: 24px;
779
- color: var(--_gray-600);
780
- }
781
-
782
- .fit_options,
783
- .size_options {
784
- display: flex;
785
- gap: 12px;
786
- flex-wrap: wrap;
787
-
788
- button {
789
- padding: 8px 12px;
790
- border: 0.5px solid var(--_gray-300);
791
- border-radius: 4px;
792
- background: #fff;
793
- font-family: "Lato";
794
- font-weight: 400;
795
- font-size: 16px;
796
- line-height: 24px;
797
- color: var(--_gray-600);
798
- cursor: pointer;
799
-
800
- &.selected {
801
- border: 0.5px solid var(--_primary-400);
802
- background-color: var(--_thm-cs-be-se-3);
803
- font-weight: 600;
804
- font-size: 16px;
805
- color: var(--_primary-400);
806
- }
807
- }
808
- }
809
- }
810
- }
811
-
812
680
  // .product_qty_wrapper {
813
681
  // display: flex;
814
682
  // // width: 124px;
@@ -1460,7 +1328,7 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
1460
1328
  .input_container {
1461
1329
  display: flex;
1462
1330
  flex-direction: column;
1463
- gap: 6px;
1331
+ gap: 4px;
1464
1332
  // margin-bottom: 12px;
1465
1333
 
1466
1334
  &:last-child {
@@ -1611,8 +1479,6 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
1611
1479
  // padding: 8px 12px;
1612
1480
  // border: 1px solid var(--_gray-300);
1613
1481
  // border-radius: 4px;
1614
- height: 40px;
1615
-
1616
1482
  background-color: var(
1617
1483
  --_ctm-mob-dn-pt-ds-gt-cd-is-bd-cr,
1618
1484
  var(--_ctm-tab-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-is-bd-cr))
@@ -1634,10 +1500,11 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
1634
1500
  --_ctm-mob-dn-pt-ds-gt-cd-is-br-wh,
1635
1501
  var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-dn-pt-ds-gt-cd-is-br-wh))
1636
1502
  );
1637
- padding: var(
1638
- --_ctm-mob-dn-pt-ds-gt-cd-is-pg,
1639
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-pg, var(--_ctm-dn-pt-ds-gt-cd-is-pg))
1640
- );
1503
+ // padding: var(
1504
+ // --_ctm-mob-dn-pt-ds-gt-cd-is-pg,
1505
+ // var(--_ctm-tab-dn-pt-ds-gt-cd-is-pg, var(--_ctm-dn-pt-ds-gt-cd-is-pg))
1506
+ // );
1507
+ padding: 10px 12px 12px 12px;
1641
1508
 
1642
1509
  transition:
1643
1510
  background-color 0.2s,
@@ -1723,6 +1590,9 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
1723
1590
  border: 0.5px solid var(--_thm-cs-be-se-3);
1724
1591
  background: #fff;
1725
1592
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
1593
+ &:focus-within {
1594
+ outline: 2px solid var(--_gray-200);
1595
+ }
1726
1596
 
1727
1597
  .product_qty_label {
1728
1598
  display: flex;
@@ -1773,16 +1643,17 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
1773
1643
  }
1774
1644
  }
1775
1645
  .add-to-cart {
1776
- // width: 100%;
1777
- // height: 56px;
1778
- // opacity: 1;
1779
- // display: flex;
1780
- // align-items: center;
1781
- // gap: 8px;
1782
1646
  padding-top: 12px;
1783
1647
  padding-right: 24px;
1784
1648
  padding-bottom: 12px;
1785
1649
  padding-left: 24px;
1650
+ transition: background 200ms ease-in-out;
1651
+ span {
1652
+ display: flex;
1653
+ svg path {
1654
+ stroke: var(--_base-white);
1655
+ }
1656
+ }
1786
1657
  // padding: var(
1787
1658
  // --_ctm-mob-dn-pt-ds-at-pg,
1788
1659
  // var(--_ctm-tab-dn-pt-ds-at-pg, var(--_ctm-dn-pt-ds-at-pg))
@@ -1863,2884 +1734,101 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
1863
1734
  // );
1864
1735
  // }
1865
1736
  }
1866
- .variant__container {
1867
- display: flex;
1868
- flex-direction: column;
1869
- gap: var(
1870
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
1871
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg))
1872
- );
1873
- padding: var(
1874
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-pg,
1875
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-pg, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-pg))
1876
- );
1877
- white-space: nowrap;
1878
-
1879
- .standard_wrapper {
1880
- // Select Colors
1881
- .select__colors {
1882
- font-size: 16px;
1883
- color: var(--_gray-500);
1884
- display: flex;
1885
- flex-direction: column;
1886
- gap: var(
1887
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg,
1888
- var(
1889
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg,
1890
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg)
1891
- )
1892
- );
1893
- // padding: var(
1894
- // --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-pg,
1895
- // var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-pg, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-pg))
1896
- // );
1897
-
1898
- .select__group {
1899
- display: flex;
1900
- flex-direction: row;
1901
- gap: var(
1902
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-sg,
1903
- var(
1904
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-sg,
1905
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-sg)
1906
- )
1907
- );
1908
-
1909
- &[data-swatch-dispaly="Vertically"] {
1910
- flex-direction: column;
1911
- }
1912
- &[data-swatch-overflow="Scroll"] {
1913
- flex-wrap: nowrap;
1914
- overflow-x: auto;
1915
- }
1916
- &[data-swatch-overflow="Wrap"] {
1917
- flex-wrap: wrap;
1918
- }
1919
-
1920
- .show_more_button {
1921
- background-color: var(
1922
- --_ctm-mob-dn-sw-me-is-bn-bd-cr,
1923
- var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
1924
- );
1925
- font-family: var(
1926
- --_ctm-mob-dn-sw-me-is-bn-ft-fy,
1927
- var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
1928
- );
1929
- border-color: var(
1930
- --_ctm-mob-dn-sw-me-is-bn-br-cr,
1931
- var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
1932
- );
1933
- border-radius: var(
1934
- --_ctm-mob-dn-sw-me-is-bn-br-rs,
1935
- var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
1936
- );
1937
- border-style: var(
1938
- --_ctm-mob-dn-sw-me-is-bn-br-se,
1939
- var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
1940
- );
1941
- border-width: var(
1942
- --_ctm-mob-dn-sw-me-is-bn-br-wh,
1943
- var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
1944
- );
1945
- font-size: var(
1946
- --_ctm-mob-dn-sw-me-is-bn-ft-se,
1947
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
1948
- );
1949
- font-style: var(
1950
- --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
1951
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
1952
- );
1953
- font-weight: var(
1954
- --_ctm-mob-dn-sw-me-is-bn-ft-wt,
1955
- var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
1956
- );
1957
- line-height: var(
1958
- --_ctm-mob-dn-sw-me-is-bn-le-ht,
1959
- var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
1960
- );
1961
- letter-spacing: var(
1962
- --_ctm-mob-dn-sw-me-is-bn-lr-sg,
1963
- var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
1964
- );
1965
- box-shadow: var(
1966
- --_ctm-mob-dn-sw-me-is-bn-sw-ae,
1967
- var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
1968
- )
1969
- var(
1970
- --_ctm-mob-dn-sw-me-is-bn-sw-br,
1971
- var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
1972
- )
1973
- var(
1974
- --_ctm-mob-dn-sw-me-is-bn-sw-sd,
1975
- var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
1976
- )
1977
- var(
1978
- --_ctm-mob-dn-sw-me-is-bn-sw-cr,
1979
- var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
1980
- );
1981
- text-align: var(
1982
- --_ctm-mob-dn-sw-me-is-bn-tt-an,
1983
- var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
1984
- );
1985
- color: var(
1986
- --_ctm-mob-dn-sw-me-is-bn-tt-cr,
1987
- var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
1988
- );
1989
- text-decoration: var(
1990
- --_ctm-mob-dn-sw-me-is-bn-ue,
1991
- var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
1992
- );
1993
- }
1737
+ }
1994
1738
 
1995
- .select__group__item {
1996
- transition: width 0.3s ease;
1739
+ @media (max-width: 768px) {
1740
+ grid-template-columns: 1fr;
1741
+ .customizer-panel {
1742
+ border-left: none;
1743
+ padding-left: 0;
1744
+ margin-top: 2rem;
1745
+ }
1746
+ }
1747
+ }
1997
1748
 
1998
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se: 30px;
1999
- height: prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-se);
2000
- width: prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-se);
2001
- padding: prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-pg);
1749
+ .embla {
1750
+ width: 100%;
1751
+ height: 100%;
1752
+ position: relative;
1753
+ display: flex;
1754
+ flex-direction: column;
1755
+ // padding: 20px;
1756
+ // overflow: hidden;
2002
1757
 
2003
- border-color: var(
2004
- --_sf-hr-br-cr,
2005
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-cr)
2006
- );
1758
+ .embla__viewport {
1759
+ width: 100%;
1760
+ height: 100%;
1761
+ position: relative;
1762
+ display: flex;
1763
+ flex-direction: column;
2007
1764
 
2008
- background-color: var(
2009
- --_sf-hr-bd-cr,
2010
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-bd-cr)
2011
- );
1765
+ overflow: hidden;
2012
1766
 
2013
- border-style: var(
2014
- --_sf-hr-br-se,
2015
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-se)
2016
- );
1767
+ .embla__container {
1768
+ width: 100%;
1769
+ height: 100%;
1770
+ display: grid;
1771
+ grid-template-rows: 100%;
2017
1772
 
2018
- border-width: var(
2019
- --_sf-hr-br-wh,
2020
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-wh)
2021
- );
2022
- border-radius: var(
2023
- --_sf-hr-br-rs,
2024
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-rs)
2025
- );
1773
+ grid-template-columns: repeat(
1774
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
1775
+ calc(
1776
+ 100% /
1777
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
1778
+ )
1779
+ );
2026
1780
 
2027
- box-shadow: var(
2028
- --_sf-hr-sw-ae,
2029
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-ae)
2030
- )
2031
- var(
2032
- --_sf-hr-sw-br,
2033
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-br)
2034
- )
2035
- var(
2036
- --_sf-hr-sw-sd,
2037
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-sd)
2038
- )
2039
- var(
2040
- --_sf-hr-sw-cr,
2041
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-cr)
2042
- );
1781
+ grid-auto-flow: column;
1782
+ gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
2043
1783
 
2044
- cursor: pointer;
2045
- overflow: hidden;
2046
- .product-select-image {
2047
- object-fit: cover;
2048
- width: 100%;
2049
- height: 100%;
2050
- }
2051
- &[data-background-shape="circle"] {
2052
- border-radius: 50%;
2053
- }
2054
- &[data-background-shape="square"] {
2055
- border-radius: 5px;
2056
- }
2057
- &[data-background-shape="capsule"] {
2058
- --toggle-height: var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-se);
2059
- --toggle-width: calc(
2060
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-se) * 1.5
2061
- );
1784
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
1785
+ height: calc(100% - calc(50px + 10px));
1786
+ }
2062
1787
 
2063
- width: var(--toggle-width);
2064
- height: var(--toggle-height);
1788
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
1789
+ height: calc(100% - calc(50px + 20px));
1790
+ }
2065
1791
 
2066
- border-radius: var(--toggle-height); /* Full pill shape */
2067
- box-sizing: border-box;
2068
- }
2069
- &[data-swatch-shape="circle"] {
2070
- & div,
2071
- .product-select-image {
2072
- border-radius: 50%;
2073
- }
2074
- // border-radius: 50%;
2075
- }
2076
- &[data-swatch-shape="capsule"] {
2077
- & div,
2078
- .product-select-image {
2079
- // border-radius: 50%;
2080
- width: 100%;
2081
- height: 100%;
2082
- border-radius: inherit;
2083
- }
2084
- // border-radius: 50%;
2085
- }
1792
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
1793
+ height: calc(
1794
+ 100% - calc(
1795
+ var(
1796
+ --_ctm-mob-dn-pn-ds-dt-se,
1797
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
1798
+ ) +
1799
+ 20px
1800
+ )
1801
+ );
1802
+ }
2086
1803
 
2087
- &[data-selected="true"] {
2088
- border-color: var(
2089
- --_sf-sd-br-cr,
2090
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-cr)
2091
- );
1804
+ .embla__slide {
1805
+ width: 100%;
1806
+ height: 100%;
1807
+ & > img {
1808
+ width: 100%;
1809
+ height: 100%;
1810
+ object-fit: contain;
1811
+ }
1812
+ }
1813
+ }
1814
+ }
1815
+ &:not([data-display-style="Column"]) {
1816
+ .embla__container {
1817
+ grid-auto-columns: calc(
1818
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
1819
+ );
1820
+ }
1821
+ }
2092
1822
 
2093
- background-color: var(
2094
- --_sf-sd-bd-cr,
2095
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-bd-cr)
2096
- );
2097
- border-style: var(
2098
- --_sf-sd-br-se,
2099
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-se)
2100
- );
2101
- border-width: var(
2102
- --_sf-sd-br-wh,
2103
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-wh)
2104
- );
2105
- box-shadow: var(
2106
- --_sf-sd-sw-ae,
2107
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-ae)
2108
- )
2109
- var(
2110
- --_sf-sd-sw-br,
2111
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-br)
2112
- )
2113
- var(
2114
- --_sf-sd-sw-sd,
2115
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-sd)
2116
- )
2117
- var(
2118
- --_sf-sd-sw-cr,
2119
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-cr)
2120
- );
2121
-
2122
- &[data-background-shape-selected="circle"] {
2123
- border-radius: 50%;
2124
- }
2125
- &[data-background-shape-selected="square"] {
2126
- border-radius: 5px;
2127
- }
2128
- &[data-background-shape-selected="capsule"] {
2129
- border-radius: 80%;
2130
- // width: calc(
2131
- // var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se))) +
2132
- // 8px
2133
- // );
2134
- }
2135
- &[data-swatch-shape-selected="circle"] {
2136
- & div,
2137
- .product-select-image {
2138
- border-radius: 50%;
2139
- }
2140
- }
2141
- &[data-swatch-shape-selected="capsule"] {
2142
- & div,
2143
- .product-select-image {
2144
- border-radius: 50%;
2145
- }
2146
- }
2147
- &[data-swatch-shape-selected="square"] {
2148
- & div,
2149
- .product-select-image {
2150
- border-radius: 5px;
2151
- }
2152
- }
2153
- }
2154
- &:hover {
2155
- --_sf-hr-bd-cr: var(
2156
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-bd-cr,
2157
- var(
2158
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-bd-cr,
2159
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-bd-cr)
2160
- )
2161
- );
2162
- --_sf-hr-br-cr: var(
2163
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-cr,
2164
- var(
2165
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-cr,
2166
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-cr)
2167
- )
2168
- );
2169
- --_sf-hr-br-se: var(
2170
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-se,
2171
- var(
2172
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-se,
2173
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-se)
2174
- )
2175
- );
2176
- --_sf-hr-br-wh: var(
2177
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-wh,
2178
- var(
2179
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-wh,
2180
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-wh)
2181
- )
2182
- );
2183
- --_sf-hr-br-bs: var(
2184
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-rs,
2185
- var(
2186
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-rs,
2187
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-br-rs)
2188
- )
2189
- );
2190
-
2191
- // new
2192
- --_sf-hr-sw-ae: var(
2193
- --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
2194
- var(
2195
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-ae,
2196
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-ae)
2197
- )
2198
- );
2199
- --_sf-hr-sw-br: var(
2200
- --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
2201
- var(
2202
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-br,
2203
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-br)
2204
- )
2205
- );
2206
- --_sf-hr-sw-hr: var(
2207
- --_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
2208
- var(
2209
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-hr,
2210
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-hr)
2211
- )
2212
- );
2213
- --_sf-hr-sw-cr: var(
2214
- --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
2215
- var(
2216
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-cr,
2217
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-hr-se-sw-cr)
2218
- )
2219
- );
2220
- }
2221
-
2222
- &:hover {
2223
- &[data-background-shape-hover="circle"] {
2224
- border-radius: 50%;
2225
- }
2226
- &[data-background-shape-hover="square"] {
2227
- border-radius: 5px;
2228
- }
2229
- &[data-background-shape-hover="capsule"] {
2230
- border-radius: 80%;
2231
- // width: calc(
2232
- // var(
2233
- // --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se,
2234
- // var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se))
2235
- // ) +
2236
- // 8px
2237
- // );
2238
- }
2239
- &[data-swatch-shape-hover="circle"] {
2240
- & div,
2241
- .product-select-image {
2242
- border-radius: 50%;
2243
- }
2244
- // border-radius: 50%;
2245
- }
2246
- &[data-swatch-shape-hover="capsule"] {
2247
- & div,
2248
- .product-select-image {
2249
- border-radius: 50%;
2250
- }
2251
- }
2252
- &[data-swatch-shape-hover="square"] {
2253
- & div,
2254
- .product-select-image {
2255
- border-radius: 5px;
2256
- }
2257
- }
2258
- }
2259
-
2260
- &[data-selected="true"] {
2261
- --_sf-sd-bd-cr: var(
2262
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-bd-cr,
2263
- var(
2264
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-bd-cr,
2265
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-bd-cr)
2266
- )
2267
- );
2268
- --_sf-sd-br-cr: var(
2269
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-cr,
2270
- var(
2271
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-cr,
2272
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-cr)
2273
- )
2274
- );
2275
- --_sf-sd-br-se: var(
2276
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-se,
2277
- var(
2278
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-se,
2279
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-se)
2280
- )
2281
- );
2282
- --_sf-sd-br-wh: var(
2283
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-wh,
2284
- var(
2285
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-wh,
2286
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-wh)
2287
- )
2288
- );
2289
- --_sf-sd-br-bs: var(
2290
- --_ctm-mob-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-rs,
2291
- var(
2292
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-rs,
2293
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-br-rs)
2294
- )
2295
- );
2296
-
2297
- // new
2298
- --_sf-sd-sw-ae: var(
2299
- --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
2300
- var(
2301
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-ae,
2302
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-ae)
2303
- )
2304
- );
2305
- --_sf-sd-sw-br: var(
2306
- --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
2307
- var(
2308
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-br,
2309
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-br)
2310
- )
2311
- );
2312
- --_sf-sd-sw-sd: var(
2313
- --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
2314
- var(
2315
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-sd,
2316
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-sd)
2317
- )
2318
- );
2319
- --_sf-sd-sw-cr: var(
2320
- --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
2321
- var(
2322
- --_ctm-tab-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-cr,
2323
- var(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-sd-se-sw-cr)
2324
- )
2325
- );
2326
-
2327
- border-color: var(
2328
- --_sf-sd-br-cr,
2329
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-cr)
2330
- );
2331
-
2332
- background-color: var(
2333
- --_sf-sd-bd-cr,
2334
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-bd-cr)
2335
- );
2336
-
2337
- border-style: var(
2338
- --_sf-sd-br-se,
2339
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-se)
2340
- );
2341
-
2342
- border-width: var(
2343
- --_sf-sd-br-wh,
2344
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-wh)
2345
- );
2346
- border-radius: var(
2347
- --_sf-sd-br-rs,
2348
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-br-rs)
2349
- );
2350
-
2351
- box-shadow: var(
2352
- --_sf-sd-sw-ae,
2353
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-ae)
2354
- )
2355
- var(
2356
- --_sf-sd-sw-br,
2357
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-br)
2358
- )
2359
- var(
2360
- --_sf-sd-sw-sd,
2361
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-sd)
2362
- )
2363
- var(
2364
- --_sf-sd-sw-cr,
2365
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-sh-on-ve-se-dt-se-sw-cr)
2366
- );
2367
-
2368
- &[data-background-shape-selected="circle"] {
2369
- border-radius: 50%;
2370
- }
2371
- &[data-background-shape-selected="square"] {
2372
- border-radius: 5px;
2373
- }
2374
- &[data-background-shape-selected="capsule"] {
2375
- --toggle-height: var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se);
2376
- --toggle-width: calc(var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-se) * 1.5);
2377
-
2378
- width: var(--toggle-width);
2379
- height: var(--toggle-height);
2380
-
2381
- border-radius: var(--toggle-height); /* Full pill shape */
2382
- box-sizing: border-box;
2383
- padding: prepareMediaVariable(
2384
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-te-dy-se-im-pg
2385
- );
2386
- }
2387
- &[data-swatch-shape-selected="circle"] {
2388
- & div,
2389
- .product-select-image {
2390
- border-radius: 50%;
2391
- }
2392
- }
2393
- &[data-swatch-shape-selected="capsule"] {
2394
- & div,
2395
- .product-select-image {
2396
- // border-radius: 50%;
2397
- width: 100%;
2398
- height: 100%;
2399
- border-radius: inherit;
2400
- }
2401
- }
2402
- &[data-swatch-shape-selected="square"] {
2403
- & div,
2404
- .product-select-image {
2405
- border-radius: 5px;
2406
- }
2407
- }
2408
- }
2409
-
2410
- // &.disabled {
2411
- // cursor: not-allowed;
2412
- // opacity: 0.4;
2413
- // &[data-swatch-type="Swatch Image"] {
2414
- // position: relative;
2415
- // overflow: hidden;
2416
- // &::after {
2417
- // content: "";
2418
- // width: 172%;
2419
- // height: 1px;
2420
- // position: absolute;
2421
- // background: #f00;
2422
- // left: -14px;
2423
- // transform: rotate(48deg);
2424
- // /* -webkit-transform: rotate(48deg); */
2425
- // -moz-transform: rotate(48deg);
2426
- // top: 14px;
2427
- // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
2428
- // }
2429
- // &::before {
2430
- // content: "";
2431
- // width: 164%;
2432
- // height: 1px;
2433
- // position: absolute;
2434
- // background: #f00;
2435
- // left: -14px;
2436
- // transform: rotate(-48deg);
2437
- // -webkit-transform: rotate(-48deg);
2438
- // -moz-transform: rotate(-48deg);
2439
- // top: 14px;
2440
- // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
2441
- // }
2442
- // }
2443
- // }
2444
-
2445
- position: relative;
2446
-
2447
- &.disabled {
2448
- color: var(--_gray-500);
2449
- background-color: var(--_gray-100);
2450
- border-color: var(--_gray-300);
2451
- cursor: not-allowed;
2452
- opacity: 0.3;
2453
- overflow: hidden;
2454
- }
2455
-
2456
- .cross-line {
2457
- position: absolute;
2458
- inset: 0;
2459
- background-color: var(--_gray-100);
2460
- clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
2461
- pointer-events: none;
2462
- }
2463
- .product-select-image {
2464
- width: 100%;
2465
- height: 100%;
2466
- }
2467
- }
2468
- }
2469
- }
2470
- // Select Fit and Size
2471
- .select__fit {
2472
- font-size: 16px;
2473
- color: var(--_gray-500);
2474
- display: flex;
2475
- flex-direction: column;
2476
- gap: var(
2477
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg,
2478
- var(
2479
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg,
2480
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg)
2481
- )
2482
- );
2483
-
2484
- // padding: var(
2485
- // --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-pg,
2486
- // var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-pg, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-pg))
2487
- // );
2488
-
2489
- .select__group {
2490
- display: flex;
2491
- gap: 8px;
2492
- flex-wrap: wrap;
2493
- // margin-bottom: 10px;
2494
- flex-direction: row;
2495
- gap: var(
2496
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-sg,
2497
- var(
2498
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-sg,
2499
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-sg)
2500
- )
2501
- );
2502
-
2503
- &[data-single-dispaly="Vertically"] {
2504
- flex-direction: column;
2505
- }
2506
- &[data-single-overflow="Scroll"] {
2507
- overflow-x: auto;
2508
- overflow-y: hidden;
2509
- flex-wrap: nowrap;
2510
- }
2511
- &[data-swatch-overflow="Scroll"] {
2512
- overflow-x: auto;
2513
- flex-wrap: nowrap;
2514
- overflow-y: hidden;
2515
- }
2516
- .show_more_button {
2517
- background-color: var(
2518
- --_ctm-mob-dn-sw-me-is-bn-bd-cr,
2519
- var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
2520
- );
2521
- font-family: var(
2522
- --_ctm-mob-dn-sw-me-is-bn-ft-fy,
2523
- var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
2524
- );
2525
- border-color: var(
2526
- --_ctm-mob-dn-sw-me-is-bn-br-cr,
2527
- var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
2528
- );
2529
- border-radius: var(
2530
- --_ctm-mob-dn-sw-me-is-bn-br-rs,
2531
- var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
2532
- );
2533
- border-style: var(
2534
- --_ctm-mob-dn-sw-me-is-bn-br-se,
2535
- var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
2536
- );
2537
- border-width: var(
2538
- --_ctm-mob-dn-sw-me-is-bn-br-wh,
2539
- var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
2540
- );
2541
- font-size: var(
2542
- --_ctm-mob-dn-sw-me-is-bn-ft-se,
2543
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
2544
- );
2545
- font-style: var(
2546
- --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
2547
- var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
2548
- );
2549
- font-weight: var(
2550
- --_ctm-mob-dn-sw-me-is-bn-ft-wt,
2551
- var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
2552
- );
2553
- line-height: var(
2554
- --_ctm-mob-dn-sw-me-is-bn-le-ht,
2555
- var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
2556
- );
2557
- letter-spacing: var(
2558
- --_ctm-mob-dn-sw-me-is-bn-lr-sg,
2559
- var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
2560
- );
2561
- box-shadow: var(
2562
- --_ctm-mob-dn-sw-me-is-bn-sw-ae,
2563
- var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
2564
- )
2565
- var(
2566
- --_ctm-mob-dn-sw-me-is-bn-sw-br,
2567
- var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
2568
- )
2569
- var(
2570
- --_ctm-mob-dn-sw-me-is-bn-sw-sd,
2571
- var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
2572
- )
2573
- var(
2574
- --_ctm-mob-dn-sw-me-is-bn-sw-cr,
2575
- var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
2576
- );
2577
- text-align: var(
2578
- --_ctm-mob-dn-sw-me-is-bn-tt-an,
2579
- var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
2580
- );
2581
- color: var(
2582
- --_ctm-mob-dn-sw-me-is-bn-tt-cr,
2583
- var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
2584
- );
2585
- text-decoration: var(
2586
- --_ctm-mob-dn-sw-me-is-bn-ue,
2587
- var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
2588
- );
2589
- }
2590
- &[data-single-dispaly="Grid"] {
2591
- display: grid;
2592
- grid-template-columns: repeat(
2593
- var(
2594
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-is-pr-rw,
2595
- var(
2596
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-is-pr-rw,
2597
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-is-pr-rw)
2598
- )
2599
- ),
2600
- minmax(auto, 1fr)
2601
- );
2602
- }
2603
-
2604
- .select__group__item {
2605
- transition: color 0.3s ease;
2606
- // border-radius: 6px;
2607
- // border: 1px solid var(--_gray-200);
2608
- cursor: pointer;
2609
- display: flex;
2610
- align-items: center;
2611
- justify-content: center;
2612
-
2613
- // height: prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-se);
2614
- // width: prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-se);
2615
- // padding: prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-se-st-dy-se-im-pg);
2616
- padding: var(
2617
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-pg,
2618
- var(
2619
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-pg,
2620
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-pg)
2621
- )
2622
- );
2623
- min-width: 20px;
2624
- min-height: 20px;
2625
- box-sizing: content-box;
2626
- border-radius: var(
2627
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-rs,
2628
- var(
2629
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-rs,
2630
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-rs)
2631
- )
2632
- );
2633
-
2634
- border-color: var(
2635
- --_sf-hr-br-cr,
2636
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-cr)
2637
- );
2638
-
2639
- background-color: var(
2640
- --_sf-hr-bd-cr,
2641
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-bd-cr)
2642
- );
2643
- border-style: var(
2644
- --_sf-hr-br-se,
2645
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-se)
2646
- );
2647
- border-width: var(
2648
- --_sf-hr-br-wh,
2649
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-wh)
2650
- );
2651
-
2652
- box-shadow: var(
2653
- --_sf-hr-sw-ae,
2654
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-ae)
2655
- )
2656
- var(
2657
- --_sf-hr-sw-br,
2658
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-br)
2659
- )
2660
- var(
2661
- --_sf-hr-sw-sd,
2662
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-sd)
2663
- )
2664
- var(
2665
- --_sf-hr-sw-cr,
2666
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-cr)
2667
- );
2668
-
2669
- // font is pending
2670
-
2671
- color: var(
2672
- --_sf-hr-cr,
2673
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-cr)
2674
- );
2675
- font-family: var(
2676
- --_sf-hr-ft-fy,
2677
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-fy)
2678
- );
2679
- font-size: var(
2680
- --_sf-hr-ft-se,
2681
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-se)
2682
- );
2683
- font-weight: var(
2684
- --_sf-hr-ft-wt,
2685
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-wt)
2686
- );
2687
- font-style: var(
2688
- --_sf-hr-ft-se-ic,
2689
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-se-ic)
2690
- );
2691
- text-align: var(
2692
- --_sf-hr-tt-an,
2693
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-tt-an)
2694
- );
2695
- letter-spacing: var(
2696
- --_sf-hr-lr-sg,
2697
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-lr-sg)
2698
- );
2699
- line-height: var(
2700
- --_sf-hr-le-ht,
2701
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-le-ht-dc)
2702
- );
2703
- text-decoration: var(
2704
- --_sf-hr-ue,
2705
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ue)
2706
- );
2707
-
2708
- &[data-background-shape="circle"] {
2709
- border-radius: 50%;
2710
- }
2711
- &[data-background-shape="square"] {
2712
- border-radius: 5px;
2713
- }
2714
- &[data-background-shape="capsule"] {
2715
- border-radius: 40px; /* Full pill shape */
2716
- box-sizing: border-box;
2717
- }
2718
-
2719
- &:hover {
2720
- --_sf-hr-bd-cr: var(
2721
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-bd-cr,
2722
- var(
2723
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-bd-cr,
2724
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-bd-cr)
2725
- )
2726
- );
2727
- --_sf-hr-br-cr: var(
2728
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-cr,
2729
- var(
2730
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-cr,
2731
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-cr)
2732
- )
2733
- );
2734
- --_sf-hr-br-se: var(
2735
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-se,
2736
- var(
2737
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-se,
2738
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-se)
2739
- )
2740
- );
2741
- --_sf-hr-br-wh: var(
2742
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-wh,
2743
- var(
2744
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-wh,
2745
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-wh)
2746
- )
2747
- );
2748
- --_sf-hr-br-bs: var(
2749
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-rs,
2750
- var(
2751
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-rs,
2752
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-br-rs)
2753
- )
2754
- );
2755
-
2756
- // new
2757
- --_sf-hr-sw-ae: var(
2758
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-ae,
2759
- var(
2760
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-ae,
2761
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-ae)
2762
- )
2763
- );
2764
- --_sf-hr-sw-br: var(
2765
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-br,
2766
- var(
2767
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-br,
2768
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-br)
2769
- )
2770
- );
2771
- --_sf-hr-sw-hr: var(
2772
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-hr,
2773
- var(
2774
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-hr,
2775
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-hr)
2776
- )
2777
- );
2778
- --_sf-hr-sw-cr: var(
2779
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-cr,
2780
- var(
2781
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-cr,
2782
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-sw-cr)
2783
- )
2784
- );
2785
-
2786
- // for font
2787
-
2788
- --_sf-hr-cr: var(
2789
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-cr,
2790
- var(
2791
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-cr,
2792
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-cr)
2793
- )
2794
- );
2795
- --_sf-hr-ft-fy: var(
2796
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-fy,
2797
- var(
2798
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-fy,
2799
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-fy)
2800
- )
2801
- );
2802
- --_sf-hr-ft-se: var(
2803
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-se,
2804
- var(
2805
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-se,
2806
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-se)
2807
- )
2808
- );
2809
- --_sf-hr-ft-wt: var(
2810
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-wt,
2811
- var(
2812
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-wt,
2813
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-wt)
2814
- )
2815
- );
2816
- --_sf-hr-ft-se-ic: var(
2817
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-se-ic,
2818
- var(
2819
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-se-ic,
2820
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-ft-se-ic)
2821
- )
2822
- );
2823
- --_sf-hr-tt-an: var(
2824
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-tt-an,
2825
- var(
2826
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-tt-an,
2827
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-tt-an)
2828
- )
2829
- );
2830
- --_sf-hr-lr-sg: var(
2831
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-lr-sg,
2832
- var(
2833
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-lr-sg,
2834
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-lr-sg)
2835
- )
2836
- );
2837
- --_sf-hr-le-ht: var(
2838
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-le-ht,
2839
- var(
2840
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-le-ht,
2841
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-hr-se-le-ht)
2842
- )
2843
- );
2844
-
2845
- --_sf-hr-ue: var(
2846
- --_ctm-mob-dn-on-ve-se-hr-se-ue,
2847
- var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue))
2848
- );
2849
- }
2850
-
2851
- &.child {
2852
- border: 0;
2853
- border-radius: 0;
2854
- border-bottom: 2px solid var(--_thm-cs-be-se-3);
2855
- }
2856
- &[data-selected="true"] {
2857
- --_sf-sd-bd-cr: var(
2858
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-bd-cr,
2859
- var(
2860
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-bd-cr,
2861
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-bd-cr)
2862
- )
2863
- );
2864
- --_sf-sd-br-cr: var(
2865
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-cr,
2866
- var(
2867
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-cr,
2868
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-cr)
2869
- )
2870
- );
2871
- --_sf-sd-br-se: var(
2872
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-se,
2873
- var(
2874
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-se,
2875
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-se)
2876
- )
2877
- );
2878
- --_sf-sd-br-wh: var(
2879
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-wh,
2880
- var(
2881
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-wh,
2882
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-wh)
2883
- )
2884
- );
2885
- --_sf-sd-br-bs: var(
2886
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-rs,
2887
- var(
2888
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-rs,
2889
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-br-rs)
2890
- )
2891
- );
2892
-
2893
- // new
2894
- --_sf-sd-sw-ae: var(
2895
- --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
2896
- var(
2897
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-ae,
2898
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-ae)
2899
- )
2900
- );
2901
- --_sf-sd-sw-br: var(
2902
- --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
2903
- var(
2904
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-br,
2905
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-br)
2906
- )
2907
- );
2908
- --_sf-sd-sw-hr: var(
2909
- --_ctm-mob-dn-on-ve-se-sd-se-sw-hr,
2910
- var(
2911
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-hr,
2912
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-hr)
2913
- )
2914
- );
2915
- --_sf-sd-sw-cr: var(
2916
- --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
2917
- var(
2918
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-cr,
2919
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-sw-cr)
2920
- )
2921
- );
2922
-
2923
- // for font
2924
-
2925
- --_sf-sd-cr: var(
2926
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-cr,
2927
- var(
2928
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-cr,
2929
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-cr)
2930
- )
2931
- );
2932
- --_sf-sd-ft-fy: var(
2933
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-fy,
2934
- var(
2935
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-fy,
2936
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-fy)
2937
- )
2938
- );
2939
- --_sf-sd-ft-se: var(
2940
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-se,
2941
- var(
2942
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-se,
2943
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-se)
2944
- )
2945
- );
2946
- --_sf-sd-ft-wt: var(
2947
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-wt,
2948
- var(
2949
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-wt,
2950
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-wt)
2951
- )
2952
- );
2953
- --_sf-sd-ft-se-ic: var(
2954
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-se-ic,
2955
- var(
2956
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-se-ic,
2957
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-ft-se-ic)
2958
- )
2959
- );
2960
- --_sf-sd-tt-an: var(
2961
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-tt-an,
2962
- var(
2963
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-tt-an,
2964
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-tt-an)
2965
- )
2966
- );
2967
- --_sf-sd-lr-sg: var(
2968
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-lr-sg,
2969
- var(
2970
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-lr-sg,
2971
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-lr-sg)
2972
- )
2973
- );
2974
- --_sf-sd-le-ht: var(
2975
- --_ctm-mob-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-le-ht,
2976
- var(
2977
- --_ctm-tab-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-le-ht,
2978
- var(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-sd-se-le-ht)
2979
- )
2980
- );
2981
-
2982
- --_sf-sd-ue: var(
2983
- --_ctm-mob-dn-on-ve-se-sd-se-ue,
2984
- var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue))
2985
- );
2986
-
2987
- border-color: var(
2988
- --_sf-sd-br-cr,
2989
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-cr)
2990
- );
2991
-
2992
- background-color: var(
2993
- --_sf-sd-bd-cr,
2994
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-bd-cr)
2995
- );
2996
- border-style: var(
2997
- --_sf-sd-br-se,
2998
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-se)
2999
- );
3000
- border-width: var(
3001
- --_sf-sd-br-wh,
3002
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-br-wh)
3003
- );
3004
-
3005
- box-shadow: var(
3006
- --_sf-sd-sw-ae,
3007
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-ae)
3008
- )
3009
- var(
3010
- --_sf-sd-sw-br,
3011
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-br)
3012
- )
3013
- var(
3014
- --_sf-sd-sw-sd,
3015
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-sd)
3016
- )
3017
- var(
3018
- --_sf-sd-sw-cr,
3019
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-sw-cr)
3020
- );
3021
- // font is pending
3022
-
3023
- color: var(
3024
- --_sf-sd-cr,
3025
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-cr)
3026
- );
3027
- font-family: var(
3028
- --_sf-sd-ft-fy,
3029
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-fy)
3030
- );
3031
- font-size: var(
3032
- --_sf-sd-ft-se,
3033
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-se)
3034
- );
3035
- font-weight: var(
3036
- --_sf-sd-ft-wt,
3037
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-wt)
3038
- );
3039
- font-style: var(
3040
- --_sf-sd-ft-se-ic,
3041
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ft-se-ic)
3042
- );
3043
- text-align: var(
3044
- --_sf-sd-tt-an,
3045
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-tt-an)
3046
- );
3047
- letter-spacing: var(
3048
- --_sf-sd-lr-sg,
3049
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-lr-sg)
3050
- );
3051
- line-height: var(
3052
- --_sf-sd-le-ht,
3053
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-le-ht-dc)
3054
- );
3055
- text-decoration: var(
3056
- --_sf-sd-ue,
3057
- prepareMediaVariable(--_ctm-dn-pt-ds-vt-pr-se-on-ve-se-dt-se-ue)
3058
- );
3059
- }
3060
-
3061
- &.selected__child {
3062
- border: 0px;
3063
- border-bottom: 2px solid var(--_primary-400);
3064
- }
3065
- // &.disabled {
3066
- // cursor: not-allowed;
3067
- // opacity: 0.4;
3068
- // position: relative;
3069
- // overflow: hidden;
3070
- // &::after {
3071
- // content: "";
3072
- // width: 172%;
3073
- // height: 1px;
3074
- // position: absolute;
3075
- // background: #f00;
3076
- // left: -14px;
3077
- // transform: rotate(48deg);
3078
- // /* -webkit-transform: rotate(48deg); */
3079
- // -moz-transform: rotate(48deg);
3080
- // top: 14px;
3081
- // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
3082
- // }
3083
- // &::before {
3084
- // content: "";
3085
- // width: 164%;
3086
- // height: 1px;
3087
- // position: absolute;
3088
- // background: #f00;
3089
- // left: -14px;
3090
- // transform: rotate(-48deg);
3091
- // -webkit-transform: rotate(-48deg);
3092
- // -moz-transform: rotate(-48deg);
3093
- // top: 14px;
3094
- // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
3095
- // }
3096
- // }
3097
- position: relative;
3098
-
3099
- &.disabled {
3100
- color: var(--_gray-500);
3101
- background-color: var(--_gray-100);
3102
- border-color: var(--_gray-300);
3103
- cursor: not-allowed;
3104
- overflow: hidden;
3105
- }
3106
-
3107
- .cross-line {
3108
- position: absolute;
3109
- inset: 0;
3110
- background-color: var(--_gray-400);
3111
- clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
3112
- pointer-events: none;
3113
- }
3114
- }
3115
- }
3116
- }
3117
- &[data-show-divider="true"] {
3118
- &:not(:last-child)::after {
3119
- content: "";
3120
- position: relative;
3121
- background-color: #000;
3122
- height: 1px;
3123
- width: 100%;
3124
- display: flex;
3125
- top: calc(
3126
- calc(
3127
- var(
3128
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3129
- var(
3130
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3131
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg)
3132
- )
3133
- ) +
3134
- 10px
3135
- ) /
3136
- 2
3137
- );
3138
- }
3139
- }
3140
-
3141
- .title {
3142
- // margin-bottom: 4px;
3143
- color: var(
3144
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-cr,
3145
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-cr, var(--_ctm-dn-pt-ds-vt-pr-on-te-cr))
3146
- );
3147
- font-family: var(
3148
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ft-fy,
3149
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ft-fy, var(--_ctm-dn-pt-ds-vt-pr-on-te-ft-fy))
3150
- );
3151
- font-size: var(
3152
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ft-se,
3153
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ft-se, var(--_ctm-dn-pt-ds-vt-pr-on-te-ft-se))
3154
- );
3155
- font-weight: var(
3156
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ft-wt,
3157
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ft-wt, var(--_ctm-dn-pt-ds-vt-pr-on-te-ft-wt))
3158
- );
3159
- font-style: var(
3160
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ft-se-ic,
3161
- var(
3162
- --_ctm-tab-dn-pt-ds-vt-pr-on-te-ft-se-ic,
3163
- var(--_ctm-dn-pt-ds-vt-pr-on-te-ft-se-ic)
3164
- )
3165
- );
3166
- text-align: var(
3167
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-tt-an,
3168
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-tt-an, var(--_ctm-dn-pt-ds-vt-pr-on-te-tt-an))
3169
- );
3170
- letter-spacing: var(
3171
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-lr-sg,
3172
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-lr-sg, var(--_ctm-dn-pt-ds-vt-pr-on-te-lr-sg))
3173
- );
3174
- line-height: var(
3175
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-le-ht,
3176
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-le-ht, var(--_ctm-dn-pt-ds-vt-pr-on-te-le-ht))
3177
- );
3178
- text-decoration: var(
3179
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ue,
3180
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ue, var(--_ctm-dn-pt-ds-vt-pr-on-te-ue))
3181
- );
3182
- max-width: 300px;
3183
- display: -webkit-box;
3184
- -webkit-box-orient: vertical;
3185
- -webkit-line-clamp: 1;
3186
- text-overflow: ellipsis;
3187
- overflow: hidden;
3188
- }
3189
- }
3190
- //Dropdown
3191
- .est__dropdown__main {
3192
- position: relative;
3193
- width: 100%;
3194
- display: flex;
3195
- flex-direction: column;
3196
- gap: var(
3197
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg,
3198
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg, var(--_ctm-dn-lt-on-te-ve-sg))
3199
- );
3200
-
3201
- padding: var(
3202
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-os-pg,
3203
- var(
3204
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-os-pg,
3205
- var(--_ctm-dn-lt-dn-dy-se-dn-os-pg)
3206
- )
3207
- );
3208
-
3209
- margin-top: 10px;
3210
-
3211
- label {
3212
- font-size: var(
3213
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ft-se,
3214
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ft-se, var(--_ctm-dn-pt-ds-vt-pr-on-te-ft-se))
3215
- );
3216
- font-family: var(
3217
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ft-fy,
3218
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ft-fy, var(--_ctm-dn-pt-ds-vt-pr-on-te-ft-fy))
3219
- );
3220
- color: var(
3221
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-cr,
3222
- var(
3223
- --_ctm-tab-dn-pt-ds-vt-pr-on-te-cr,
3224
- var(--_gray-700, var(--_ctm-dn-pt-ds-vt-pr-on-te-cr))
3225
- )
3226
- );
3227
- font-weight: var(
3228
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ft-wt,
3229
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ft-wt, var(--_ctm-dn-pt-ds-vt-pr-on-te-ft-wt))
3230
- );
3231
- text-decoration: var(
3232
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-ue,
3233
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-ue, var(--_ctm-dn-pt-ds-vt-pr-on-te-ue))
3234
- );
3235
- letter-spacing: var(
3236
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-lr-sg,
3237
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-lr-sg, var(--_ctm-dn-pt-ds-vt-pr-on-te-lr-sg))
3238
- );
3239
- text-align: var(
3240
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-tt-an,
3241
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-tt-an, var(--_ctm-dn-pt-ds-vt-pr-on-te-tt-an))
3242
- );
3243
- line-height: var(
3244
- --_ctm-mob-dn-pt-ds-vt-pr-on-te-le-ht,
3245
- var(--_ctm-tab-dn-pt-ds-vt-pr-on-te-le-ht, var(--_ctm-dn-pt-ds-vt-pr-on-te-le-ht))
3246
- );
3247
- display: block;
3248
- }
3249
-
3250
- .est__dropdown {
3251
- cursor: pointer;
3252
- position: relative;
3253
- color: var(--_gray-700);
3254
-
3255
- border-radius: 6px;
3256
- background-color: #fff;
3257
- display: flex;
3258
- justify-content: space-between;
3259
- align-items: center;
3260
- width: 100%;
3261
- .value__selected {
3262
- width: 100%;
3263
- }
3264
-
3265
- &.open .list {
3266
- display: none;
3267
- margin-top: var(
3268
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-on-ad-lt-sg,
3269
- var(
3270
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-on-ad-lt-sg,
3271
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-on-ad-lt-sg)
3272
- )
3273
- );
3274
- gap: var(
3275
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
3276
- var(
3277
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
3278
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg)
3279
- )
3280
- );
3281
- background-color: var(
3282
- --_ctm-mob-dn-dn-se-bd-cr,
3283
- var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
3284
- );
3285
- }
3286
-
3287
- .list {
3288
- display: flex !important;
3289
- flex-direction: column;
3290
- gap: var(
3291
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
3292
- var(
3293
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
3294
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg)
3295
- )
3296
- );
3297
- border: var(
3298
- --_ctm-mob-dn-dn-se-br-wh,
3299
- var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
3300
- )
3301
- var(
3302
- --_ctm-mob-dn-dn-se-br-se,
3303
- var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
3304
- )
3305
- var(
3306
- --_gray-200,
3307
- var(
3308
- --_ctm-mob-dn-dn-se-br-cr,
3309
- var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
3310
- )
3311
- );
3312
- border-radius: var(
3313
- --_ctm-mob-dn-dn-se-br-rs,
3314
- var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
3315
- );
3316
- box-shadow: var(
3317
- --_show-shadow-dn-se,
3318
- var(
3319
- --_ctm-mob-dn-dn-se-sw-ae,
3320
- var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae))
3321
- )
3322
- var(
3323
- --_ctm-mob-dn-dn-se-sw-br,
3324
- var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
3325
- )
3326
- var(
3327
- --_ctm-mob-dn-dn-se-sw-sd,
3328
- var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
3329
- )
3330
- var(
3331
- --_ctm-mob-dn-dn-se-sw-cr,
3332
- var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
3333
- )
3334
- );
3335
- position: absolute;
3336
- top: 100%;
3337
- left: 0;
3338
- width: 100%;
3339
- background-color: var(
3340
- --_ctm-mob-dn-dn-se-bd-cr,
3341
- var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
3342
- );
3343
- border-radius: 4px;
3344
- z-index: var(--_higher-zIndex);
3345
- max-height: 200px;
3346
- overflow-y: auto;
3347
-
3348
- &.top {
3349
- bottom: 100%;
3350
- top: auto;
3351
- }
3352
-
3353
- .list__option {
3354
- padding: var(
3355
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-pg,
3356
- var(
3357
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-pg,
3358
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-pg)
3359
- )
3360
- );
3361
- cursor: pointer;
3362
-
3363
- &:hover {
3364
- background-color: var(--_primary-25);
3365
- color: var(--_primary-400);
3366
- }
3367
-
3368
- &.disabled {
3369
- cursor: not-allowed;
3370
- opacity: 0.4;
3371
- }
3372
- }
3373
- }
3374
- }
3375
- }
3376
-
3377
- // variant dropdown selection
3378
- .var__drop__selection {
3379
- display: flex;
3380
- width: 100%;
3381
- gap: var(
3382
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
3383
- var(
3384
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
3385
- var(
3386
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
3387
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg)
3388
- )
3389
- )
3390
- );
3391
-
3392
- flex-direction: row;
3393
- &[data-dropdown-style="Vertical List"] {
3394
- flex-direction: column;
3395
- gap: var(
3396
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3397
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg))
3398
- );
3399
- }
3400
- .dropdown_wrapper {
3401
- position: relative;
3402
- &[data-show-divider="true"] {
3403
- &:not(:last-child)::after {
3404
- content: "";
3405
- position: relative;
3406
- background-color: #000;
3407
- height: 1px;
3408
- width: 100%;
3409
- display: flex;
3410
- top: calc(
3411
- calc(
3412
- var(
3413
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3414
- var(
3415
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3416
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg)
3417
- )
3418
- ) +
3419
- 10px
3420
- ) /
3421
- 2
3422
- );
3423
- }
3424
- }
3425
-
3426
- &[data-show-item-divider="true"] {
3427
- .est__dropdown__main {
3428
- .est__dropdown {
3429
- .list {
3430
- :not(:last-child).list__option {
3431
- &::after {
3432
- content: "";
3433
- position: relative;
3434
- background-color: #000;
3435
- height: 1px;
3436
- width: 100%;
3437
- display: flex;
3438
- top: calc(
3439
- var(
3440
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
3441
- var(
3442
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg,
3443
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-dy-se-dn-lt-im-sg)
3444
- )
3445
- ) /
3446
- 2
3447
- );
3448
- }
3449
- }
3450
- }
3451
- }
3452
- }
3453
- }
3454
- }
3455
- & > div {
3456
- width: 100%;
3457
- }
3458
- }
3459
- // Quantity Fields
3460
- .field__group {
3461
- // display: flex;
3462
- // flex-wrap: wrap;
3463
- // gap: 8px;
3464
- display: grid;
3465
- grid-template-columns: repeat(
3466
- auto-fit,
3467
- minmax(
3468
- var(
3469
- --_ctm-mob-var-lt-mn-cn-wh,
3470
- var(--_ctm-tab-var-lt-mn-cn-wh, var(--_ctm-var-lt-mn-cn-wh))
3471
- ),
3472
- var(--_ctm-mob-var-lt-mn-cn-wh)
3473
- )
3474
- );
3475
- gap: var(
3476
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-rw-sg,
3477
- var(
3478
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-rw-sg,
3479
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-rw-sg)
3480
- )
3481
- );
3482
- .field__group__item {
3483
- font-size: 16px;
3484
- display: flex;
3485
- flex-direction: column;
3486
- align-items: center;
3487
- justify-content: center;
3488
- gap: 8px;
3489
- input[type="number"] {
3490
- // width: 70px !important;
3491
- width: 100%;
3492
- border: 1px solid var(--_gray-300);
3493
- padding-inline: 10px;
3494
- border-radius: 4px;
3495
- text-align: center;
3496
- height: 40px;
3497
- &:focus-within {
3498
- border: 1px solid var(--_primary-200);
3499
- box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
3500
- }
3501
- &:disabled {
3502
- cursor: not-allowed;
3503
- opacity: 0.4;
3504
- }
3505
- }
3506
- }
3507
- }
3508
- // Enter quantity styles
3509
- .quantiy__details {
3510
- display: flex;
3511
- flex-direction: column;
3512
- gap: var(
3513
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-sg,
3514
- var(
3515
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-sg,
3516
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-sg)
3517
- )
3518
- );
3519
- padding: var(
3520
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-pg,
3521
- var(
3522
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-pg,
3523
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-pg)
3524
- )
3525
- );
3526
-
3527
- .title {
3528
- display: flex;
3529
- justify-content: space-between;
3530
- align-items: center;
3531
- font-weight: 600;
3532
- font-size: 18px;
3533
- & > button {
3534
- border-bottom: 1px solid var(--_gray-400);
3535
- color: var(--_gray-600);
3536
- font-size: 14px;
3537
- }
3538
- }
3539
- .fit__details {
3540
- display: flex;
3541
- flex-direction: column;
3542
- gap: 12px;
3543
- .fit__desc {
3544
- display: flex;
3545
- flex-direction: column;
3546
- gap: var(
3547
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-hr-ad-on-sg,
3548
- var(
3549
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-hr-ad-on-sg,
3550
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-hr-ad-on-sg)
3551
- )
3552
- );
3553
-
3554
- font-size: 16px;
3555
- color: var(--_gray-900);
3556
- .each__price {
3557
- font-weight: 600;
3558
- }
3559
- }
3560
- }
3561
- }
3562
- .grouped_items {
3563
- display: flex;
3564
- flex-direction: column;
3565
- gap: var(
3566
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3567
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg))
3568
- );
3569
-
3570
- .tab__accordion {
3571
- display: flex;
3572
- flex-direction: column;
3573
- gap: var(
3574
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3575
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg))
3576
- );
3577
-
3578
- .tab__container {
3579
- display: flex;
3580
- flex-direction: column;
3581
-
3582
- .tab {
3583
- &:first-child {
3584
- margin-bottom: var(
3585
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg,
3586
- var(
3587
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg,
3588
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-on-te-ve-sg)
3589
- )
3590
- );
3591
- }
3592
- }
3593
-
3594
- .tab__content {
3595
- display: flex;
3596
- flex-direction: column;
3597
- padding: var(
3598
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-pg,
3599
- var(
3600
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-pg,
3601
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-pg)
3602
- )
3603
- );
3604
-
3605
- .field__group {
3606
- gap: var(
3607
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-sg,
3608
- var(
3609
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-sg,
3610
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-sg)
3611
- )
3612
- );
3613
-
3614
- .field__group__item {
3615
- gap: var(
3616
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-hr-ad-on-sg,
3617
- var(
3618
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-hr-ad-on-sg,
3619
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-gp-hr-ad-on-sg)
3620
- )
3621
- );
3622
- }
3623
- }
3624
- }
3625
- }
3626
- }
3627
-
3628
- &[data-show-divider="true"] {
3629
- & > div {
3630
- &:not(:last-child)::after {
3631
- content: "";
3632
- position: relative;
3633
- background-color: #000;
3634
- height: 1px;
3635
- width: 100%;
3636
- display: flex;
3637
- top: calc(
3638
- var(
3639
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3640
- var(
3641
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3642
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg)
3643
- )
3644
- ) /
3645
- 2
3646
- );
3647
- }
3648
- }
3649
-
3650
- .tab__accordion {
3651
- &:not(:last-child)::after {
3652
- content: "";
3653
- position: relative;
3654
- background-color: #000;
3655
- height: 1px;
3656
- width: 100%;
3657
- display: flex;
3658
- top: calc(
3659
- var(
3660
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3661
- var(
3662
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3663
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg)
3664
- )
3665
- ) /
3666
- 2
3667
- );
3668
- }
3669
- }
3670
- }
3671
- }
3672
- // tabs
3673
- .tabs__container {
3674
- display: flex;
3675
- position: relative;
3676
- .tab {
3677
- flex: 1;
3678
- padding-block: 20px;
3679
- font-weight: 600;
3680
- text-align: center;
3681
- cursor: pointer;
3682
- position: relative;
3683
- &.tab__active {
3684
- font-weight: bold;
3685
- }
3686
- }
3687
- .tab__active-indicator {
3688
- position: absolute;
3689
- bottom: 0;
3690
- left: 0;
3691
- height: 2px;
3692
- background-color: #000;
3693
- transition:
3694
- left 0.3s ease,
3695
- width 0.3s ease;
3696
- }
3697
- }
3698
-
3699
- // accordion tabs
3700
- .tab__accordion_wrapper {
3701
- .tab__accordion {
3702
- display: flex;
3703
- flex-direction: column;
3704
- padding: var(
3705
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-cr-pg,
3706
- var(
3707
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-cr-pg,
3708
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-cr-pg)
3709
- )
3710
- );
3711
-
3712
- .tab__container {
3713
- display: flex;
3714
- flex-direction: column;
3715
- gap: var(
3716
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-sg,
3717
- var(
3718
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-sg,
3719
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-sg)
3720
- )
3721
- );
3722
-
3723
- .tab_acc_wrapper {
3724
- display: flex;
3725
- flex-direction: column;
3726
- gap: var(
3727
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-ad-cr-sg,
3728
- var(
3729
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-ad-cr-sg,
3730
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-ad-cr-sg)
3731
- )
3732
- );
3733
-
3734
- padding: var(
3735
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-vl-pg,
3736
- var(
3737
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-vl-pg,
3738
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-vl-pg)
3739
- )
3740
- )
3741
- var(
3742
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-hl-pg,
3743
- var(
3744
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-hl-pg,
3745
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-hl-pg)
3746
- )
3747
- );
3748
-
3749
- .tab {
3750
- display: flex;
3751
- padding-inline: 2px;
3752
- position: relative;
3753
- cursor: pointer;
3754
- flex-direction: row;
3755
- &[data-expand-icon="Left"] {
3756
- flex-direction: row-reverse;
3757
- justify-content: flex-end;
3758
- }
3759
- &[data-item-dividers="true"] {
3760
- &::after {
3761
- content: "";
3762
- position: absolute;
3763
- bottom: 0;
3764
- height: 2px;
3765
- width: 100%;
3766
- border-bottom: 1px solid var(--_thm-cs-be-se-3);
3767
- }
3768
- }
3769
- span {
3770
- padding-block: 12px;
3771
- display: inline-block;
3772
- }
3773
- .active {
3774
- border-bottom: 2px solid var(--_primary-400);
3775
- }
3776
- &.inactive {
3777
- height: 0px;
3778
- }
3779
- }
3780
- .tab__content {
3781
- &.d-none {
3782
- display: none;
3783
- }
3784
- &.d-block {
3785
- display: block;
3786
- }
3787
- }
3788
- }
3789
- }
3790
- }
3791
-
3792
- &[data-show-dividers="true"] {
3793
- .tab__accordion {
3794
- .tab__container {
3795
- .tab_acc_wrapper {
3796
- &:not(:last-child)::after {
3797
- content: "";
3798
- position: relative;
3799
- background-color: #000;
3800
- height: 1px;
3801
- width: 100%;
3802
- display: flex;
3803
- top: calc(
3804
- var(
3805
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-sg,
3806
- var(
3807
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-sg,
3808
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-an-sg)
3809
- )
3810
- ) /
3811
- 2
3812
- );
3813
- }
3814
- }
3815
- }
3816
- }
3817
- }
3818
-
3819
- &[data-icon-position="Left"] {
3820
- .tab__accordion {
3821
- .tab__container {
3822
- .tab_acc_wrapper {
3823
- .tab {
3824
- flex-direction: row-reverse;
3825
- align-self: flex-start;
3826
- }
3827
- }
3828
- }
3829
- }
3830
- }
3831
- }
3832
-
3833
- // table
3834
- .table_container,
3835
- .tab__content {
3836
- .table__class {
3837
- border: 1px solid var(--_thm-cs-be-se-3);
3838
- border-radius: 8px;
3839
- .custom__table {
3840
- border: 1px solid var(--_thm-cs-be-se-3);
3841
- width: 100%;
3842
- table-layout: fixed;
3843
- // height: 300px;
3844
-
3845
- border-collapse: collapse;
3846
- &[data-header-divider="true"] {
3847
- thead tr th {
3848
- border-bottom: 1px solid var(--_thm-cs-be-se-3);
3849
- }
3850
- }
3851
- &[data-row-divider="true"] {
3852
- tbody tr td {
3853
- border-bottom: 1px solid var(--_thm-cs-be-se-3);
3854
- }
3855
- }
3856
- &[data-column-divider="true"] {
3857
- tbody tr td,
3858
- thead tr th {
3859
- border-right: 1px solid var(--_thm-cs-be-se-3);
3860
- }
3861
-
3862
- tbody tr td:last-child,
3863
- thead tr th:last-child {
3864
- border-right: none;
3865
- }
3866
- }
3867
- &[data-alternative-row-colors="true"] {
3868
- tbody tr:nth-child(odd) {
3869
- background-color: var(--_gray-300);
3870
- width: 100%;
3871
- }
3872
- }
3873
- thead {
3874
- height: var(
3875
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-ht,
3876
- var(
3877
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-ht,
3878
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-ht)
3879
- )
3880
- );
3881
- th {
3882
- height: var(
3883
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-ht,
3884
- var(
3885
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-ht,
3886
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-ht)
3887
- )
3888
- );
3889
- text-align: var(
3890
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-ct-at,
3891
- var(
3892
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-ct-at,
3893
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-ct-at)
3894
- )
3895
- );
3896
- padding: var(
3897
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-cl-pg,
3898
- var(
3899
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-cl-pg,
3900
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-hr-cl-pg)
3901
- )
3902
- );
3903
- background-color: var(--_gray-50);
3904
- font-weight: 600;
3905
- color: var(--_gray-600);
3906
- word-break: break-word;
3907
- }
3908
- }
3909
-
3910
- tbody {
3911
- tr {
3912
- border-bottom: 1px solid var(--_thm-cs-be-se-3);
3913
- height: var(
3914
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-rw-ht,
3915
- var(
3916
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-rw-ht,
3917
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-rw-ht)
3918
- )
3919
- );
3920
- td {
3921
- text-align: var(
3922
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-ct-at,
3923
- var(
3924
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-ct-at,
3925
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-ct-at)
3926
- )
3927
- );
3928
- padding: var(
3929
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-rw-cl-pg,
3930
- var(
3931
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-rw-cl-pg,
3932
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-te-dy-se-rw-cl-pg)
3933
- )
3934
- );
3935
- .disocunted__price {
3936
- color: var(--_gray-900);
3937
- }
3938
- .actual__price {
3939
- color: var(--_gray-500);
3940
- }
3941
- .qty__input {
3942
- border: 1px solid var(--_thm-cs-be-se-3);
3943
- padding-inline: 10px;
3944
- text-align: center;
3945
- border-radius: 6px;
3946
- height: 40px;
3947
- }
3948
- input[type="number"] {
3949
- &:focus-within {
3950
- border: 1px solid var(--_primary-200);
3951
- box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
3952
- }
3953
- &:disabled {
3954
- cursor: not-allowed;
3955
- opacity: 0.4;
3956
- }
3957
- }
3958
- }
3959
- }
3960
- }
3961
- }
3962
- }
3963
- &[data-show-divider="true"] {
3964
- & > div {
3965
- &:not(:last-child)::after {
3966
- content: "";
3967
- position: relative;
3968
- background-color: #000;
3969
- height: 1px;
3970
- width: 100%;
3971
- display: flex;
3972
- top: calc(
3973
- var(
3974
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3975
- var(
3976
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg,
3977
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-im-sg)
3978
- )
3979
- ) /
3980
- 2
3981
- );
3982
- }
3983
- }
3984
- }
3985
- }
3986
-
3987
- // horizontal tabs
3988
- .tabs__main {
3989
- &.tabs__vertical {
3990
- .tabs {
3991
- .tabs__container {
3992
- flex-direction: column;
3993
- min-width: 120px;
3994
- }
3995
- }
3996
- }
3997
- &.tabs__hr {
3998
- .tabs {
3999
- flex-direction: column;
4000
- gap: var(
4001
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-ad-cr-sg,
4002
- var(
4003
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-ad-cr-sg,
4004
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-ad-cr-sg)
4005
- )
4006
- );
4007
-
4008
- .tabs__container {
4009
- width: 100%;
4010
- }
4011
- }
4012
- }
4013
- .tabs {
4014
- display: flex;
4015
- gap: var(
4016
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tb-im-se-dt-se-tb-ad-cr-sg,
4017
- var(
4018
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tb-im-se-dt-se-tb-ad-cr-sg,
4019
- var(--_ctm-dn-tb-im-se-dt-se-tb-ad-cr-sg)
4020
- )
4021
- );
4022
-
4023
- .tabs__container {
4024
- display: flex;
4025
- gap: var(
4026
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-sg,
4027
- var(
4028
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-sg,
4029
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-sg)
4030
- )
4031
- );
4032
-
4033
- .tab {
4034
- display: flex;
4035
- justify-content: var(--_tab-aliginment);
4036
- padding: var(
4037
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-vl-pg,
4038
- var(
4039
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-vl-pg,
4040
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-vl-pg)
4041
- )
4042
- )
4043
- var(
4044
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-hl-pg,
4045
- var(
4046
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-hl-pg,
4047
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-tb-hl-pg)
4048
- )
4049
- );
4050
- background-color: var(
4051
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-bd-cr,
4052
- var(
4053
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-bd-cr,
4054
- var(--_ctm-dn-tb-im-se-dt-se-bd-cr)
4055
- )
4056
- );
4057
- border-color: var(
4058
- --_show-border-im-se,
4059
- var(
4060
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-cr,
4061
- var(
4062
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-cr,
4063
- var(--_ctm-dn-tb-im-se-dt-se-br-cr)
4064
- )
4065
- )
4066
- );
4067
- border-style: var(
4068
- --_show-border-im-se,
4069
- var(
4070
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-se,
4071
- var(
4072
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-se,
4073
- var(--_ctm-dn-tb-im-se-dt-se-br-se)
4074
- )
4075
- )
4076
- );
4077
- border-width: var(
4078
- --_show-border-im-se,
4079
- var(
4080
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-wh,
4081
- var(
4082
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-wh,
4083
- var(--_ctm-dn-tb-im-se-dt-se-br-wh)
4084
- )
4085
- )
4086
- );
4087
- border-radius: var(
4088
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-rs,
4089
- var(
4090
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-rs,
4091
- var(--_ctm-dn-tb-im-se-dt-se-br-rs)
4092
- )
4093
- );
4094
- box-shadow: var(
4095
- --_show-shadow-im-se,
4096
- var(
4097
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-ae,
4098
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-ae)
4099
- ),
4100
- var(
4101
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-br,
4102
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-br)
4103
- ),
4104
- var(
4105
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-sd,
4106
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-sd)
4107
- ),
4108
- var(
4109
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-cr,
4110
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-sw-cr)
4111
- )
4112
- );
4113
- border-radius: var(
4114
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-rs,
4115
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-dt-se-br-rs)
4116
- );
4117
-
4118
- &:hover {
4119
- background-color: var(
4120
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-bd-cr,
4121
- var(
4122
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-bd-cr,
4123
- var(--_ctm-dn-tb-im-se-hr-se-bd-cr)
4124
- )
4125
- );
4126
- border-color: var(
4127
- --_show-border-im-se,
4128
- var(
4129
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-cr,
4130
- var(
4131
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-cr,
4132
- var(--_ctm-dn-tb-im-se-hr-se-br-cr)
4133
- )
4134
- )
4135
- );
4136
- border-style: var(
4137
- --_show-border-im-se,
4138
- var(
4139
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-se,
4140
- var(
4141
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-se,
4142
- var(--_ctm-dn-tb-im-se-hr-se-br-se)
4143
- )
4144
- )
4145
- );
4146
- border-width: var(
4147
- --_show-border-im-se,
4148
- var(
4149
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-wh,
4150
- var(
4151
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-wh,
4152
- var(--_ctm-dn-tb-im-se-hr-se-br-wh)
4153
- )
4154
- )
4155
- );
4156
- border-radius: var(
4157
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-rs,
4158
- var(
4159
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-br-rs,
4160
- var(--_ctm-dn-tb-im-se-hr-se-br-rs)
4161
- )
4162
- );
4163
- box-shadow: var(
4164
- --_show-shadow-im-se,
4165
- var(
4166
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-ae,
4167
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-ae)
4168
- ),
4169
- var(
4170
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-br,
4171
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-br)
4172
- ),
4173
- var(
4174
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-sd,
4175
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-sd)
4176
- ),
4177
- var(
4178
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-cr,
4179
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-hr-se-sw-cr)
4180
- )
4181
- );
4182
- }
4183
-
4184
- &.active {
4185
- background-color: var(
4186
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-bd-cr,
4187
- var(
4188
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-bd-cr,
4189
- var(--_ctm-dn-tb-im-se-sd-se-bd-cr)
4190
- )
4191
- );
4192
- border-color: var(
4193
- --_show-border-im-se,
4194
- var(
4195
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-cr,
4196
- var(
4197
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-cr,
4198
- var(--_ctm-dn-tb-im-se-sd-se-br-cr)
4199
- )
4200
- )
4201
- );
4202
- border-style: var(
4203
- --_show-border-im-se,
4204
- var(
4205
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-se,
4206
- var(
4207
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-se,
4208
- var(--_ctm-dn-tb-im-se-sd-se-br-se)
4209
- )
4210
- )
4211
- );
4212
- border-width: var(
4213
- --_show-border-im-se,
4214
- var(
4215
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-wh,
4216
- var(
4217
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-wh,
4218
- var(--_ctm-dn-tb-im-se-sd-se-br-wh)
4219
- )
4220
- )
4221
- );
4222
- border-radius: var(
4223
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-rs,
4224
- var(
4225
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-br-rs,
4226
- var(--_ctm-dn-tb-im-se-sd-se-br-rs)
4227
- )
4228
- );
4229
- box-shadow: var(
4230
- --_show-shadow-im-se,
4231
- var(
4232
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-ae,
4233
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-ae)
4234
- ),
4235
- var(
4236
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-br,
4237
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-br)
4238
- ),
4239
- var(
4240
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-sd,
4241
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-sd)
4242
- ),
4243
- var(
4244
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-cr,
4245
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-dn-tb-im-se-sd-se-sw-cr)
4246
- )
4247
- );
4248
- }
4249
- }
4250
- }
4251
- .tab__content {
4252
- padding: var(
4253
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-cr-pg,
4254
- var(
4255
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-cr-pg,
4256
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-gd-os-dy-se-cr-pg)
4257
- )
4258
- );
4259
- }
4260
- }
4261
- }
4262
-
4263
- // embla
4264
-
4265
- .embla {
4266
- width: 100%;
4267
- height: 100%;
4268
- position: relative;
4269
- display: flex;
4270
- flex-direction: column;
4271
-
4272
- // overflow: hidden;
4273
-
4274
- .embla__viewport {
4275
- width: 100%;
4276
- height: 100%;
4277
- position: relative;
4278
- display: flex;
4279
- flex-direction: column;
4280
-
4281
- overflow: hidden;
4282
-
4283
- .embla__container {
4284
- width: 100%;
4285
- height: 100%;
4286
- display: flex;
4287
- grid-template-rows: 100%;
4288
- // grid-template-columns: 100%;
4289
- // grid-template-columns: repeat(
4290
- // var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-is-pr-se),
4291
- // calc(100% / var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-is-pr-se))
4292
- // );
4293
- // grid-auto-flow: column;
4294
- gap: var(
4295
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-sg,
4296
- var(
4297
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-sg,
4298
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-sh-im-sg)
4299
- )
4300
- );
4301
-
4302
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
4303
- height: calc(
4304
- 100% - calc(
4305
- var(
4306
- --_ctm-mob-dn-pn-as-aw-se,
4307
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
4308
- ) +
4309
- 8px
4310
- )
4311
- );
4312
- }
4313
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
4314
- height: calc(
4315
- 100% - calc(
4316
- var(
4317
- --_ctm-mob-dn-pn-le-le-ht,
4318
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
4319
- ) +
4320
- 20px
4321
- )
4322
- );
4323
- }
4324
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
4325
- height: calc(
4326
- 100% - calc(
4327
- var(
4328
- --_ctm-mob-dn-pn-ds-dt-se,
4329
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
4330
- ) +
4331
- 20px
4332
- )
4333
- );
4334
- }
4335
-
4336
- .embla__slide {
4337
- // width: 100%;
4338
- height: 100%;
4339
- }
4340
- }
4341
- }
4342
-
4343
- .arrow-navigation {
4344
- display: flex;
4345
- position: absolute;
4346
- top: 50%;
4347
- left: 50%;
4348
- width: 100%;
4349
- justify-content: space-between;
4350
- transform: translate(-50%, -50%);
4351
- // padding-left: 20px;
4352
- &[data-control-type="Side"] {
4353
- .left-button,
4354
- .right-button {
4355
- background-color: transparent;
4356
- }
4357
- }
4358
- &[data-background-shape="Round"] {
4359
- .left-button,
4360
- .right-button {
4361
- background-color: #f2f5f5;
4362
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
4363
- }
4364
- }
4365
- &[data-control-type="Bottom-Overflow"] {
4366
- transform: translateX(-50%);
4367
- width: 100%;
4368
- justify-content: center;
4369
- gap: 12px;
4370
- top: unset;
4371
- bottom: 6px;
4372
- }
4373
- &[data-control-type="Bottom"] {
4374
- transform: unset;
4375
- position: static;
4376
- width: 100%;
4377
- justify-content: center;
4378
- gap: 12px;
4379
- margin-top: 10px;
4380
- }
4381
- .left-button {
4382
- padding: 10px;
4383
- border-radius: 50%;
4384
- border: none;
4385
- width: var(
4386
- --_ctm-mob-dn-pn-as-aw-se,
4387
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
4388
- );
4389
- height: var(
4390
- --_ctm-mob-dn-pn-as-aw-se,
4391
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
4392
- );
4393
-
4394
- display: flex;
4395
- align-items: center;
4396
- justify-content: center;
4397
- cursor: pointer;
4398
- outline: none;
4399
- margin-left: 12px;
4400
- &:disabled {
4401
- & svg {
4402
- path {
4403
- stroke: rgb(192, 192, 192);
4404
- }
4405
- }
4406
- }
4407
- }
4408
- .right-button {
4409
- border-radius: 50%;
4410
- border: none;
4411
- width: var(
4412
- --_ctm-mob-dn-pn-as-aw-se,
4413
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
4414
- );
4415
- height: var(
4416
- --_ctm-mob-dn-pn-as-aw-se,
4417
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
4418
- );
4419
-
4420
- display: flex;
4421
- align-items: center;
4422
- justify-content: center;
4423
- cursor: pointer;
4424
- outline: none;
4425
- margin-right: 12px;
4426
- padding: 10px;
4427
-
4428
- &:disabled {
4429
- & svg {
4430
- path {
4431
- stroke: rgb(192, 192, 192);
4432
- }
4433
- }
4434
- }
4435
- }
4436
- .icon {
4437
- display: flex;
4438
- svg {
4439
- width: calc(
4440
- var(
4441
- --_ctm-mob-dn-pn-as-aw-se,
4442
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
4443
- ) *
4444
- 0.5
4445
- );
4446
- height: calc(
4447
- var(
4448
- --_ctm-mob-dn-pn-as-aw-se,
4449
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
4450
- ) *
4451
- 0.5
4452
- );
4453
- path {
4454
- stroke: var(
4455
- --_ctm-mob-dn-pn-as-aw-cr,
4456
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
4457
- );
4458
- }
4459
- }
4460
- }
4461
- }
4462
-
4463
- &[data-thumbnail-placement="top"] {
4464
- flex-direction: column-reverse;
4465
- }
4466
- &[data-thumbnail-placement="bottom"] {
4467
- flex-direction: column;
4468
- }
4469
- &[data-thumbnail-placement="left"] {
4470
- flex-direction: row-reverse;
4471
-
4472
- .embla__thumbs {
4473
- width: var(
4474
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
4475
- var(
4476
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
4477
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se)
4478
- )
4479
- );
4480
-
4481
- height: 100%;
4482
-
4483
- & .embla__thumbs__container {
4484
- flex-direction: column;
4485
- height: 100%;
4486
- }
4487
- }
4488
- }
4489
- &[data-thumbnail-placement="right"] {
4490
- flex-direction: row;
4491
- .embla__thumbs {
4492
- width: var(
4493
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
4494
- var(
4495
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
4496
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se)
4497
- )
4498
- );
4499
-
4500
- height: 100%;
4501
-
4502
- & .embla__thumbs__container {
4503
- flex-direction: column;
4504
- height: 100%;
4505
- }
4506
- }
4507
- }
4508
- &[data-control-type="Side"] {
4509
- display: flex;
4510
- align-self: center;
4511
- flex-direction: row;
4512
- .left-button:disabled,
4513
- .right-button:disabled {
4514
- display: none;
4515
- }
4516
- }
4517
- .embla__dots {
4518
- display: flex;
4519
- flex-wrap: wrap;
4520
- justify-content: center;
4521
- align-items: center;
4522
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
4523
- gap: 6px;
4524
- margin-top: 16px;
4525
-
4526
- &[data-control-type="Bottom-Overflow"] {
4527
- position: absolute;
4528
- bottom: 10px;
4529
- left: 50%;
4530
- transform: translateX(-50%);
4531
- width: 75%;
4532
- }
4533
- .embla__dot {
4534
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
4535
- -webkit-appearance: none;
4536
- appearance: none;
4537
- background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
4538
- touch-action: manipulation;
4539
- display: inline-flex;
4540
- text-decoration: none;
4541
- cursor: pointer;
4542
- border: 0;
4543
- padding: 0;
4544
- margin: 0;
4545
- // width: 0.6rem;
4546
- // height: 0.6rem;
4547
- width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
4548
- height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
4549
- display: flex;
4550
- align-items: center;
4551
- justify-content: center;
4552
- border-radius: 50%;
4553
- }
4554
- .embla__dot:after {
4555
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
4556
- width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
4557
- height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
4558
- border-radius: 50%;
4559
- display: flex;
4560
- align-items: center;
4561
- content: "";
4562
- }
4563
- .embla__dot--selected:after {
4564
- box-shadow: inset 0 0 0 1px var(--text-body);
4565
- background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
4566
- }
4567
- &[data-slider-control="Pagination Line"] {
4568
- .embla__dot {
4569
- width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
4570
- height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
4571
- background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
4572
-
4573
- border-radius: 6px;
4574
- }
4575
- .embla__dot--selected:after {
4576
- box-shadow: inset 0 0 0 1px var(--text-body);
4577
- border-radius: 6px;
4578
- width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
4579
- height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
4580
- // background-color: #fff;
4581
- background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
4582
- }
4583
- }
4584
- }
4585
-
4586
- .embla__thumbs {
4587
- width: 100%;
4588
- height: var(
4589
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
4590
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se, var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se))
4591
- );
4592
-
4593
- position: relative;
4594
- display: grid;
4595
- grid-template-columns: 1fr;
4596
- overflow: hidden;
4597
- // margin: 10px;
4598
- padding: 10px;
4599
-
4600
- .embla__thumbs__viewport {
4601
- width: 100%;
4602
- height: 100%;
4603
- position: relative;
4604
- display: flex;
4605
- flex-direction: column;
4606
-
4607
- overflow: hidden;
4608
- }
4609
- .embla__thumbs__container {
4610
- display: flex;
4611
- flex-direction: row;
4612
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
4613
- gap: var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-sg);
4614
- width: 100%;
4615
- // justify-content: center;
4616
- // height: 200px;
4617
-
4618
- .embla__thumbs__slide {
4619
- min-width: var(
4620
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
4621
- var(
4622
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
4623
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se)
4624
- )
4625
- );
4626
- max-width: var(
4627
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
4628
- var(
4629
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
4630
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se)
4631
- )
4632
- );
4633
- height: var(
4634
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
4635
- var(
4636
- --_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se,
4637
- var(--_ctm-dn-pt-ds-vt-pr-vt-pr-lt-tl-se)
4638
- )
4639
- );
4640
- & img {
4641
- width: 100%;
4642
- height: 100%;
4643
- }
4644
- }
4645
- }
4646
- }
4647
- }
4648
- }
4649
- }
4650
-
4651
- @media (max-width: 768px) {
4652
- grid-template-columns: 1fr;
4653
- .customizer-panel {
4654
- border-left: none;
4655
- padding-left: 0;
4656
- margin-top: 2rem;
4657
- }
4658
- }
4659
- }
4660
-
4661
- .embla {
4662
- width: 100%;
4663
- height: 100%;
4664
- position: relative;
4665
- display: flex;
4666
- flex-direction: column;
4667
- // padding: 20px;
4668
- // overflow: hidden;
4669
-
4670
- .embla__viewport {
4671
- width: 100%;
4672
- height: 100%;
4673
- position: relative;
4674
- display: flex;
4675
- flex-direction: column;
4676
-
4677
- overflow: hidden;
4678
-
4679
- .embla__container {
4680
- width: 100%;
4681
- height: 100%;
4682
- display: grid;
4683
- grid-template-rows: 100%;
4684
-
4685
- grid-template-columns: repeat(
4686
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
4687
- calc(
4688
- 100% /
4689
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
4690
- )
4691
- );
4692
-
4693
- grid-auto-flow: column;
4694
- gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
4695
-
4696
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
4697
- height: calc(100% - calc(50px + 10px));
4698
- }
4699
-
4700
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
4701
- height: calc(100% - calc(50px + 20px));
4702
- }
4703
-
4704
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
4705
- height: calc(
4706
- 100% - calc(
4707
- var(
4708
- --_ctm-mob-dn-pn-ds-dt-se,
4709
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
4710
- ) +
4711
- 20px
4712
- )
4713
- );
4714
- }
4715
-
4716
- .embla__slide {
4717
- width: 100%;
4718
- height: 100%;
4719
- & > img {
4720
- width: 100%;
4721
- height: 100%;
4722
- object-fit: contain;
4723
- }
4724
- }
4725
- }
4726
- }
4727
- &:not([data-display-style="Column"]) {
4728
- .embla__container {
4729
- grid-auto-columns: calc(
4730
- 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
4731
- );
4732
- }
4733
- }
4734
-
4735
- .arrow-navigation {
4736
- display: flex;
4737
- position: absolute;
4738
- top: 50%;
4739
- left: 50%;
4740
- width: 100%;
4741
- justify-content: space-between;
4742
- transform: translate(-50%, -50%);
4743
- // padding-left: 20px;
1823
+ .arrow-navigation {
1824
+ display: flex;
1825
+ position: absolute;
1826
+ top: 50%;
1827
+ left: 50%;
1828
+ width: 100%;
1829
+ justify-content: space-between;
1830
+ transform: translate(-50%, -50%);
1831
+ // padding-left: 20px;
4744
1832
 
4745
1833
  &[data-control-type="Bottom-Overflow"] {
4746
1834
  transform: translateX(-50%);
@@ -5053,6 +2141,8 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
5053
2141
  }
5054
2142
  }
5055
2143
  }
2144
+
2145
+ // for bundle details
5056
2146
  }
5057
2147
  }
5058
2148
  .text_ellipsis {