@sc-360-v2/storefront-cms-library 0.4.47 → 0.4.50

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 (185) 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 +968 -3031
  6. package/dist/allocationDetails.scss +2247 -2247
  7. package/dist/allocations.scss +1603 -1604
  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 -3092
  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 -2386
  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 -903
  35. package/dist/cartDropdownOverlay.scss +514 -231
  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 +98 -46
  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 +2418 -2418
  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 -558
  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 +4 -3
  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 +209 -209
  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 +198 -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 +1945 -381
  172. package/dist/types/builder/tools/element-edit/bulkVariantPicker.d.ts +1 -1
  173. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +9 -0
  174. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +66 -0
  175. package/dist/uom-selector.scss +1169 -1169
  176. package/dist/user-elements copy.scss +1437 -1437
  177. package/dist/user-elements.scss +2471 -2471
  178. package/dist/variant-picker.scss +2384 -2384
  179. package/dist/video.scss +476 -476
  180. package/dist/volume-pricing copy 2.scss +1468 -1468
  181. package/dist/volume-pricing copy.scss +1077 -1077
  182. package/dist/volume-pricing.scss +1175 -1175
  183. package/dist/widget.scss +148 -148
  184. package/dist/wishlist-overlay.scss +48 -48
  185. package/package.json +1 -1
package/dist/add-products-tab-details.scss ADDED
@@ -0,0 +1,3818 @@
1
+ .variant__picker__static {
2
+ .text-element {
3
+ color: #333;
4
+ font-family: Lato;
5
+ font-size: 12px;
6
+ font-style: normal;
7
+ font-weight: 400;
8
+ line-height: 18px;
9
+ margin-bottom: 6px;
10
+ }
11
+ .option__title {
12
+ margin-bottom: 4px;
13
+ color: var(
14
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr,
15
+ var(
16
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr,
17
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr)
18
+ )
19
+ );
20
+ font-family: var(
21
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy,
22
+ var(
23
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy,
24
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy)
25
+ )
26
+ );
27
+ font-size: var(
28
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se,
29
+ var(
30
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se,
31
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se)
32
+ )
33
+ );
34
+ font-weight: var(
35
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt,
36
+ var(
37
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt,
38
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt)
39
+ )
40
+ );
41
+ font-style: var(
42
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic,
43
+ var(
44
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic,
45
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic)
46
+ )
47
+ );
48
+ text-align: var(
49
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an,
50
+ var(
51
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an,
52
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an)
53
+ )
54
+ );
55
+ letter-spacing: var(
56
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg,
57
+ var(
58
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg,
59
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg)
60
+ )
61
+ );
62
+ line-height: var(
63
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht,
64
+ var(
65
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht,
66
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht)
67
+ )
68
+ );
69
+ text-decoration: var(
70
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue,
71
+ var(
72
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue,
73
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue)
74
+ )
75
+ );
76
+ }
77
+
78
+ .is__combination_avail {
79
+ color: red;
80
+ font-size: 14px;
81
+ font-weight: 600;
82
+ }
83
+ .variant__container {
84
+ display: flex;
85
+ flex-direction: column;
86
+ gap: var(
87
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
88
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg))
89
+ );
90
+ padding: var(
91
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-pg,
92
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-pg))
93
+ );
94
+ white-space: nowrap;
95
+
96
+ .standard_wrapper {
97
+ // Select Colors
98
+ .select__colors {
99
+ font-size: 16px;
100
+ color: var(--_gray-500);
101
+ display: flex;
102
+ flex-direction: column;
103
+ gap: var(
104
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
105
+ var(
106
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
107
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg)
108
+ )
109
+ );
110
+ // padding: var(
111
+ // --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg,
112
+ // var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg))
113
+ // );
114
+
115
+ .select__group {
116
+ display: flex;
117
+ flex-direction: row;
118
+ gap: var(
119
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-sg,
120
+ var(
121
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-sg,
122
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-sg)
123
+ )
124
+ );
125
+
126
+ &[data-swatch-dispaly="Vertically"] {
127
+ flex-direction: column;
128
+ }
129
+ &[data-swatch-overflow="Scroll"] {
130
+ flex-wrap: nowrap;
131
+ overflow-x: auto;
132
+ }
133
+ &[data-swatch-overflow="Wrap"] {
134
+ flex-wrap: wrap;
135
+ }
136
+
137
+ .show_more_button {
138
+ background-color: var(
139
+ --_ctm-mob-dn-sw-me-is-bn-bd-cr,
140
+ var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
141
+ );
142
+ font-family: var(
143
+ --_ctm-mob-dn-sw-me-is-bn-ft-fy,
144
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
145
+ );
146
+ border-color: var(
147
+ --_ctm-mob-dn-sw-me-is-bn-br-cr,
148
+ var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
149
+ );
150
+ border-radius: var(
151
+ --_ctm-mob-dn-sw-me-is-bn-br-rs,
152
+ var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
153
+ );
154
+ border-style: var(
155
+ --_ctm-mob-dn-sw-me-is-bn-br-se,
156
+ var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
157
+ );
158
+ border-width: var(
159
+ --_ctm-mob-dn-sw-me-is-bn-br-wh,
160
+ var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
161
+ );
162
+ font-size: var(
163
+ --_ctm-mob-dn-sw-me-is-bn-ft-se,
164
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
165
+ );
166
+ font-style: var(
167
+ --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
168
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
169
+ );
170
+ font-weight: var(
171
+ --_ctm-mob-dn-sw-me-is-bn-ft-wt,
172
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
173
+ );
174
+ line-height: var(
175
+ --_ctm-mob-dn-sw-me-is-bn-le-ht,
176
+ var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
177
+ );
178
+ letter-spacing: var(
179
+ --_ctm-mob-dn-sw-me-is-bn-lr-sg,
180
+ var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
181
+ );
182
+ box-shadow: var(
183
+ --_ctm-mob-dn-sw-me-is-bn-sw-ae,
184
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
185
+ )
186
+ var(
187
+ --_ctm-mob-dn-sw-me-is-bn-sw-br,
188
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
189
+ )
190
+ var(
191
+ --_ctm-mob-dn-sw-me-is-bn-sw-sd,
192
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
193
+ )
194
+ var(
195
+ --_ctm-mob-dn-sw-me-is-bn-sw-cr,
196
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
197
+ );
198
+ text-align: var(
199
+ --_ctm-mob-dn-sw-me-is-bn-tt-an,
200
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
201
+ );
202
+ color: var(
203
+ --_ctm-mob-dn-sw-me-is-bn-tt-cr,
204
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
205
+ );
206
+ text-decoration: var(
207
+ --_ctm-mob-dn-sw-me-is-bn-ue,
208
+ var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
209
+ );
210
+ }
211
+
212
+ .select__group__item {
213
+ transition: width 0.3s ease;
214
+
215
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se: var(
216
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se
217
+ );
218
+ height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se);
219
+ width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se);
220
+ padding: prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-pg);
221
+
222
+ border-color: var(
223
+ --_sf-hr-br-cr,
224
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-cr)
225
+ );
226
+
227
+ background-color: var(
228
+ --_sf-hr-bd-cr,
229
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-bd-cr)
230
+ );
231
+
232
+ border-style: var(
233
+ --_sf-hr-br-se,
234
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-se)
235
+ );
236
+
237
+ border-width: var(
238
+ --_sf-hr-br-wh,
239
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-wh)
240
+ );
241
+ border-radius: var(
242
+ --_sf-hr-br-rs,
243
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-rs)
244
+ );
245
+
246
+ box-shadow: var(
247
+ --_sf-hr-sw-ae,
248
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-ae)
249
+ )
250
+ var(
251
+ --_sf-hr-sw-br,
252
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-br)
253
+ )
254
+ var(
255
+ --_sf-hr-sw-sd,
256
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-sd)
257
+ )
258
+ var(
259
+ --_sf-hr-sw-cr,
260
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-cr)
261
+ );
262
+
263
+ cursor: pointer;
264
+ overflow: hidden;
265
+ .product-select-image {
266
+ object-fit: cover;
267
+ width: 100%;
268
+ height: 100%;
269
+ }
270
+ &[data-background-shape="circle"] {
271
+ border-radius: 50%;
272
+ }
273
+ &[data-background-shape="square"] {
274
+ border-radius: 5px;
275
+ }
276
+ &[data-background-shape="capsule"] {
277
+ --toggle-height: var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se);
278
+ --toggle-width: calc(var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-te-dy-se-im-se) * 1.5);
279
+
280
+ width: var(--toggle-width);
281
+ height: var(--toggle-height);
282
+
283
+ border-radius: var(--toggle-height); /* Full pill shape */
284
+ box-sizing: border-box;
285
+ }
286
+ &[data-swatch-shape="circle"] {
287
+ & div,
288
+ .product-select-image {
289
+ border-radius: 50%;
290
+ }
291
+ // border-radius: 50%;
292
+ }
293
+ &[data-swatch-shape="capsule"] {
294
+ & div,
295
+ .product-select-image {
296
+ // border-radius: 50%;
297
+ width: 100%;
298
+ height: 100%;
299
+ border-radius: inherit;
300
+ }
301
+ // border-radius: 50%;
302
+ }
303
+
304
+ &[data-selected="true"] {
305
+ border-color: var(
306
+ --_sf-sd-br-cr,
307
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr)
308
+ );
309
+
310
+ background-color: var(
311
+ --_sf-sd-bd-cr,
312
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr)
313
+ );
314
+ border-style: var(
315
+ --_sf-sd-br-se,
316
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se)
317
+ );
318
+ border-width: var(
319
+ --_sf-sd-br-wh,
320
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh)
321
+ );
322
+ box-shadow: var(
323
+ --_sf-sd-sw-ae,
324
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-ae)
325
+ )
326
+ var(
327
+ --_sf-sd-sw-br,
328
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-br)
329
+ )
330
+ var(
331
+ --_sf-sd-sw-sd,
332
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-sd)
333
+ )
334
+ var(
335
+ --_sf-sd-sw-cr,
336
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-cr)
337
+ );
338
+
339
+ &[data-background-shape-selected="circle"] {
340
+ border-radius: 50%;
341
+ }
342
+ &[data-background-shape-selected="square"] {
343
+ border-radius: 5px;
344
+ }
345
+ &[data-background-shape-selected="capsule"] {
346
+ border-radius: 80%;
347
+ // width: calc(
348
+ // var(--_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se, var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se))) +
349
+ // 8px
350
+ // );
351
+ }
352
+ &[data-swatch-shape-selected="circle"] {
353
+ & div,
354
+ .product-select-image {
355
+ border-radius: 50%;
356
+ }
357
+ }
358
+ &[data-swatch-shape-selected="capsule"] {
359
+ & div,
360
+ .product-select-image {
361
+ border-radius: 50%;
362
+ }
363
+ }
364
+ &[data-swatch-shape-selected="square"] {
365
+ & div,
366
+ .product-select-image {
367
+ border-radius: 5px;
368
+ }
369
+ }
370
+ }
371
+ &:hover {
372
+ --_sf-hr-bd-cr: var(
373
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-bd-cr,
374
+ var(
375
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-bd-cr,
376
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-bd-cr)
377
+ )
378
+ );
379
+ --_sf-hr-br-cr: var(
380
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-cr,
381
+ var(
382
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-cr,
383
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-cr)
384
+ )
385
+ );
386
+ --_sf-hr-br-se: var(
387
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-se,
388
+ var(
389
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-se,
390
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-se)
391
+ )
392
+ );
393
+ --_sf-hr-br-wh: var(
394
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-wh,
395
+ var(
396
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-wh,
397
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-wh)
398
+ )
399
+ );
400
+ --_sf-hr-br-bs: var(
401
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-rs,
402
+ var(
403
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-rs,
404
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-br-rs)
405
+ )
406
+ );
407
+
408
+ // new
409
+ --_sf-hr-sw-ae: var(
410
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
411
+ var(
412
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-ae,
413
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-ae)
414
+ )
415
+ );
416
+ --_sf-hr-sw-br: var(
417
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
418
+ var(
419
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-br,
420
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-br)
421
+ )
422
+ );
423
+ --_sf-hr-sw-hr: var(
424
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
425
+ var(
426
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-hr,
427
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-hr)
428
+ )
429
+ );
430
+ --_sf-hr-sw-cr: var(
431
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
432
+ var(
433
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-cr,
434
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-hr-se-sw-cr)
435
+ )
436
+ );
437
+ }
438
+
439
+ &:hover {
440
+ &[data-background-shape-hover="circle"] {
441
+ border-radius: 50%;
442
+ }
443
+ &[data-background-shape-hover="square"] {
444
+ border-radius: 5px;
445
+ }
446
+ &[data-background-shape-hover="capsule"] {
447
+ border-radius: 80%;
448
+ // width: calc(
449
+ // var(
450
+ // --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se,
451
+ // var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se))
452
+ // ) +
453
+ // 8px
454
+ // );
455
+ }
456
+ &[data-swatch-shape-hover="circle"] {
457
+ & div,
458
+ .product-select-image {
459
+ border-radius: 50%;
460
+ }
461
+ // border-radius: 50%;
462
+ }
463
+ &[data-swatch-shape-hover="capsule"] {
464
+ & div,
465
+ .product-select-image {
466
+ border-radius: 50%;
467
+ }
468
+ }
469
+ &[data-swatch-shape-hover="square"] {
470
+ & div,
471
+ .product-select-image {
472
+ border-radius: 5px;
473
+ }
474
+ }
475
+ }
476
+
477
+ &[data-selected="true"] {
478
+ --_sf-sd-bd-cr: var(
479
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr,
480
+ var(
481
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr,
482
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-bd-cr)
483
+ )
484
+ );
485
+ --_sf-sd-br-cr: var(
486
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr,
487
+ var(
488
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr,
489
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-cr)
490
+ )
491
+ );
492
+ --_sf-sd-br-se: var(
493
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se,
494
+ var(
495
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se,
496
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-se)
497
+ )
498
+ );
499
+ --_sf-sd-br-wh: var(
500
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh,
501
+ var(
502
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh,
503
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-wh)
504
+ )
505
+ );
506
+ --_sf-sd-br-bs: var(
507
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs,
508
+ var(
509
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs,
510
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-br-rs)
511
+ )
512
+ );
513
+
514
+ // new
515
+ --_sf-sd-sw-ae: var(
516
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
517
+ var(
518
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-ae,
519
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-ae)
520
+ )
521
+ );
522
+ --_sf-sd-sw-br: var(
523
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
524
+ var(
525
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-br,
526
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-br)
527
+ )
528
+ );
529
+ --_sf-sd-sw-sd: var(
530
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
531
+ var(
532
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-sd,
533
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-sd)
534
+ )
535
+ );
536
+ --_sf-sd-sw-cr: var(
537
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
538
+ var(
539
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-cr,
540
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-sd-se-sw-cr)
541
+ )
542
+ );
543
+
544
+ border-color: var(
545
+ --_sf-sd-br-cr,
546
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-cr)
547
+ );
548
+
549
+ background-color: var(
550
+ --_sf-sd-bd-cr,
551
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-bd-cr)
552
+ );
553
+
554
+ border-style: var(
555
+ --_sf-sd-br-se,
556
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-se)
557
+ );
558
+
559
+ border-width: var(
560
+ --_sf-sd-br-wh,
561
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-wh)
562
+ );
563
+ border-radius: var(
564
+ --_sf-sd-br-rs,
565
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-br-rs)
566
+ );
567
+
568
+ box-shadow: var(
569
+ --_sf-sd-sw-ae,
570
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-ae)
571
+ )
572
+ var(
573
+ --_sf-sd-sw-br,
574
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-br)
575
+ )
576
+ var(
577
+ --_sf-sd-sw-sd,
578
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-sd)
579
+ )
580
+ var(
581
+ --_sf-sd-sw-cr,
582
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-sh-on-ve-se-dt-se-sw-cr)
583
+ );
584
+
585
+ &[data-background-shape-selected="circle"] {
586
+ border-radius: 50%;
587
+ }
588
+ &[data-background-shape-selected="square"] {
589
+ border-radius: 5px;
590
+ }
591
+ &[data-background-shape-selected="capsule"] {
592
+ --toggle-height: var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se);
593
+ --toggle-width: calc(var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-se) * 1.5);
594
+
595
+ width: var(--toggle-width);
596
+ height: var(--toggle-height);
597
+
598
+ border-radius: var(--toggle-height); /* Full pill shape */
599
+ box-sizing: border-box;
600
+ }
601
+ &[data-swatch-shape-selected="circle"] {
602
+ & div,
603
+ .product-select-image {
604
+ border-radius: 50%;
605
+ }
606
+ }
607
+ &[data-swatch-shape-selected="capsule"] {
608
+ & div,
609
+ .product-select-image {
610
+ // border-radius: 50%;
611
+ width: 100%;
612
+ height: 100%;
613
+ border-radius: inherit;
614
+ }
615
+ }
616
+ &[data-swatch-shape-selected="square"] {
617
+ & div,
618
+ .product-select-image {
619
+ border-radius: 5px;
620
+ }
621
+ }
622
+ }
623
+
624
+ // &.disabled {
625
+ // cursor: not-allowed;
626
+ // opacity: 0.4;
627
+ // &[data-swatch-type="Swatch Image"] {
628
+ // position: relative;
629
+ // overflow: hidden;
630
+ // &::after {
631
+ // content: "";
632
+ // width: 172%;
633
+ // height: 1px;
634
+ // position: absolute;
635
+ // background: #f00;
636
+ // left: -14px;
637
+ // transform: rotate(48deg);
638
+ // /* -webkit-transform: rotate(48deg); */
639
+ // -moz-transform: rotate(48deg);
640
+ // top: 14px;
641
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
642
+ // }
643
+ // &::before {
644
+ // content: "";
645
+ // width: 164%;
646
+ // height: 1px;
647
+ // position: absolute;
648
+ // background: #f00;
649
+ // left: -14px;
650
+ // transform: rotate(-48deg);
651
+ // -webkit-transform: rotate(-48deg);
652
+ // -moz-transform: rotate(-48deg);
653
+ // top: 14px;
654
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
655
+ // }
656
+ // }
657
+ // }
658
+
659
+ position: relative;
660
+
661
+ &.disabled {
662
+ color: #aaa;
663
+ background-color: #f9f9f9;
664
+ border-color: #ddd;
665
+ cursor: not-allowed;
666
+ opacity: 0.3;
667
+ overflow: hidden;
668
+ }
669
+
670
+ .cross-line {
671
+ position: absolute;
672
+ inset: 0;
673
+ background-color: #cccccc;
674
+ clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
675
+ pointer-events: none;
676
+ }
677
+ .product-select-image {
678
+ width: 100%;
679
+ height: 100%;
680
+ }
681
+ }
682
+ }
683
+ }
684
+ // Select Fit and Size
685
+ .select__fit {
686
+ font-size: 16px;
687
+ color: var(--_gray-500);
688
+ display: flex;
689
+ flex-direction: column;
690
+ gap: var(
691
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
692
+ var(
693
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
694
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg)
695
+ )
696
+ );
697
+
698
+ // padding: var(
699
+ // --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg,
700
+ // var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg))
701
+ // );
702
+
703
+ .select__group {
704
+ display: flex;
705
+ gap: 8px;
706
+ flex-wrap: wrap;
707
+ margin-bottom: 10px;
708
+ flex-direction: row;
709
+ gap: var(
710
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-sg,
711
+ var(
712
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-sg,
713
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-sg)
714
+ )
715
+ );
716
+
717
+ &[data-single-dispaly="Vertically"] {
718
+ flex-direction: column;
719
+ }
720
+ &[data-single-overflow="Scroll"] {
721
+ overflow-x: auto;
722
+ overflow-y: hidden;
723
+ flex-wrap: nowrap;
724
+ }
725
+ &[data-swatch-overflow="Scroll"] {
726
+ overflow-x: auto;
727
+ flex-wrap: nowrap;
728
+ overflow-y: hidden;
729
+ }
730
+ .show_more_button {
731
+ background-color: var(
732
+ --_ctm-mob-dn-sw-me-is-bn-bd-cr,
733
+ var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
734
+ );
735
+ font-family: var(
736
+ --_ctm-mob-dn-sw-me-is-bn-ft-fy,
737
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
738
+ );
739
+ border-color: var(
740
+ --_ctm-mob-dn-sw-me-is-bn-br-cr,
741
+ var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
742
+ );
743
+ border-radius: var(
744
+ --_ctm-mob-dn-sw-me-is-bn-br-rs,
745
+ var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
746
+ );
747
+ border-style: var(
748
+ --_ctm-mob-dn-sw-me-is-bn-br-se,
749
+ var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
750
+ );
751
+ border-width: var(
752
+ --_ctm-mob-dn-sw-me-is-bn-br-wh,
753
+ var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
754
+ );
755
+ font-size: var(
756
+ --_ctm-mob-dn-sw-me-is-bn-ft-se,
757
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
758
+ );
759
+ font-style: var(
760
+ --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
761
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
762
+ );
763
+ font-weight: var(
764
+ --_ctm-mob-dn-sw-me-is-bn-ft-wt,
765
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
766
+ );
767
+ line-height: var(
768
+ --_ctm-mob-dn-sw-me-is-bn-le-ht,
769
+ var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
770
+ );
771
+ letter-spacing: var(
772
+ --_ctm-mob-dn-sw-me-is-bn-lr-sg,
773
+ var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
774
+ );
775
+ box-shadow: var(
776
+ --_ctm-mob-dn-sw-me-is-bn-sw-ae,
777
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
778
+ )
779
+ var(
780
+ --_ctm-mob-dn-sw-me-is-bn-sw-br,
781
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
782
+ )
783
+ var(
784
+ --_ctm-mob-dn-sw-me-is-bn-sw-sd,
785
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
786
+ )
787
+ var(
788
+ --_ctm-mob-dn-sw-me-is-bn-sw-cr,
789
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
790
+ );
791
+ text-align: var(
792
+ --_ctm-mob-dn-sw-me-is-bn-tt-an,
793
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
794
+ );
795
+ color: var(
796
+ --_ctm-mob-dn-sw-me-is-bn-tt-cr,
797
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
798
+ );
799
+ text-decoration: var(
800
+ --_ctm-mob-dn-sw-me-is-bn-ue,
801
+ var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
802
+ );
803
+ }
804
+ &[data-single-dispaly="Grid"] {
805
+ display: grid;
806
+ grid-template-columns: repeat(
807
+ var(
808
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-is-pr-rw,
809
+ var(
810
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-is-pr-rw,
811
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-is-pr-rw)
812
+ )
813
+ ),
814
+ minmax(auto, 1fr)
815
+ );
816
+ }
817
+
818
+ .select__group__item {
819
+ transition: color 0.3s ease;
820
+ // border-radius: 6px;
821
+ // border: 1px solid var(--_gray-200);
822
+ cursor: pointer;
823
+ display: flex;
824
+ align-items: center;
825
+ justify-content: center;
826
+
827
+ // height: prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-se);
828
+ // width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-se);
829
+ padding: prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-se-st-dy-se-im-pg);
830
+ min-width: 20px;
831
+ min-height: 20px;
832
+ box-sizing: content-box;
833
+ border-radius: var(
834
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-rs,
835
+ var(
836
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-rs,
837
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-rs)
838
+ )
839
+ );
840
+
841
+ border-color: var(
842
+ --_sf-hr-br-cr,
843
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-cr)
844
+ );
845
+
846
+ background-color: var(
847
+ --_sf-hr-bd-cr,
848
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-bd-cr)
849
+ );
850
+ border-style: var(
851
+ --_sf-hr-br-se,
852
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-se)
853
+ );
854
+ border-width: var(
855
+ --_sf-hr-br-wh,
856
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-wh)
857
+ );
858
+
859
+ box-shadow: var(
860
+ --_sf-hr-sw-ae,
861
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-ae)
862
+ )
863
+ var(
864
+ --_sf-hr-sw-br,
865
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-br)
866
+ )
867
+ var(
868
+ --_sf-hr-sw-sd,
869
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-sd)
870
+ )
871
+ var(
872
+ --_sf-hr-sw-cr,
873
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-cr)
874
+ );
875
+
876
+ // font is pending
877
+
878
+ color: var(
879
+ --_sf-hr-cr,
880
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-cr)
881
+ );
882
+ font-family: var(
883
+ --_sf-hr-ft-fy,
884
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-fy)
885
+ );
886
+ font-size: var(
887
+ --_sf-hr-ft-se,
888
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se)
889
+ );
890
+ font-weight: var(
891
+ --_sf-hr-ft-wt,
892
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-wt)
893
+ );
894
+ font-style: var(
895
+ --_sf-hr-ft-se-ic,
896
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se-ic)
897
+ );
898
+ text-align: var(
899
+ --_sf-hr-tt-an,
900
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-tt-an)
901
+ );
902
+ letter-spacing: var(
903
+ --_sf-hr-lr-sg,
904
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-lr-sg)
905
+ );
906
+ line-height: var(
907
+ --_sf-hr-le-ht,
908
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-le-ht-dc)
909
+ );
910
+ text-decoration: var(
911
+ --_sf-hr-ue,
912
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ue)
913
+ );
914
+
915
+ &[data-background-shape="circle"] {
916
+ border-radius: 50%;
917
+ }
918
+ // &[data-background-shape="square"] {
919
+ // border-radius: 5px;
920
+ // }
921
+ &[data-background-shape="capsule"] {
922
+ border-radius: 40px; /* Full pill shape */
923
+ box-sizing: border-box;
924
+ }
925
+
926
+ &:hover {
927
+ --_sf-hr-bd-cr: var(
928
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-bd-cr,
929
+ var(
930
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-bd-cr,
931
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-bd-cr)
932
+ )
933
+ );
934
+ --_sf-hr-br-cr: var(
935
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-cr,
936
+ var(
937
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-cr,
938
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-cr)
939
+ )
940
+ );
941
+ --_sf-hr-br-se: var(
942
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-se,
943
+ var(
944
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-se,
945
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-se)
946
+ )
947
+ );
948
+ --_sf-hr-br-wh: var(
949
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-wh,
950
+ var(
951
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-wh,
952
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-wh)
953
+ )
954
+ );
955
+ --_sf-hr-br-bs: var(
956
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-rs,
957
+ var(
958
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-rs,
959
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-br-rs)
960
+ )
961
+ );
962
+
963
+ // new
964
+ --_sf-hr-sw-ae: var(
965
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-ae,
966
+ var(
967
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-ae,
968
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-ae)
969
+ )
970
+ );
971
+ --_sf-hr-sw-br: var(
972
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-br,
973
+ var(
974
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-br,
975
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-br)
976
+ )
977
+ );
978
+ --_sf-hr-sw-hr: var(
979
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-hr,
980
+ var(
981
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-hr,
982
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-hr)
983
+ )
984
+ );
985
+ --_sf-hr-sw-cr: var(
986
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-cr,
987
+ var(
988
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-cr,
989
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-sw-cr)
990
+ )
991
+ );
992
+
993
+ // for font
994
+
995
+ --_sf-hr-cr: var(
996
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-cr,
997
+ var(
998
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-cr,
999
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-cr)
1000
+ )
1001
+ );
1002
+ --_sf-hr-ft-fy: var(
1003
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-fy,
1004
+ var(
1005
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-fy,
1006
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-fy)
1007
+ )
1008
+ );
1009
+ --_sf-hr-ft-se: var(
1010
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se,
1011
+ var(
1012
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se,
1013
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se)
1014
+ )
1015
+ );
1016
+ --_sf-hr-ft-wt: var(
1017
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-wt,
1018
+ var(
1019
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-wt,
1020
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-wt)
1021
+ )
1022
+ );
1023
+ --_sf-hr-ft-se-ic: var(
1024
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se-ic,
1025
+ var(
1026
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se-ic,
1027
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-ft-se-ic)
1028
+ )
1029
+ );
1030
+ --_sf-hr-tt-an: var(
1031
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-an,
1032
+ var(
1033
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-an,
1034
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-tt-an)
1035
+ )
1036
+ );
1037
+ --_sf-hr-lr-sg: var(
1038
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-lr-sg,
1039
+ var(
1040
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-lr-sg,
1041
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-lr-sg)
1042
+ )
1043
+ );
1044
+ --_sf-hr-le-ht: var(
1045
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-le-ht,
1046
+ var(
1047
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-le-ht,
1048
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-hr-se-le-ht)
1049
+ )
1050
+ );
1051
+
1052
+ --_sf-hr-ue: var(
1053
+ --_ctm-mob-dn-on-ve-se-hr-se-ue,
1054
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue))
1055
+ );
1056
+ }
1057
+
1058
+ &.child {
1059
+ border: 0;
1060
+ border-radius: 0;
1061
+ border-bottom: 2px solid var(--_gray-200);
1062
+ }
1063
+ &[data-selected="true"] {
1064
+ --_sf-sd-bd-cr: var(
1065
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-bd-cr,
1066
+ var(
1067
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-bd-cr,
1068
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-bd-cr)
1069
+ )
1070
+ );
1071
+ --_sf-sd-br-cr: var(
1072
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-cr,
1073
+ var(
1074
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-cr,
1075
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-cr)
1076
+ )
1077
+ );
1078
+ --_sf-sd-br-se: var(
1079
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-se,
1080
+ var(
1081
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-se,
1082
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-se)
1083
+ )
1084
+ );
1085
+ --_sf-sd-br-wh: var(
1086
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-wh,
1087
+ var(
1088
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-wh,
1089
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-wh)
1090
+ )
1091
+ );
1092
+ --_sf-sd-br-bs: var(
1093
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-rs,
1094
+ var(
1095
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-rs,
1096
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-br-rs)
1097
+ )
1098
+ );
1099
+
1100
+ // new
1101
+ --_sf-sd-sw-ae: var(
1102
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
1103
+ var(
1104
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-ae,
1105
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-ae)
1106
+ )
1107
+ );
1108
+ --_sf-sd-sw-br: var(
1109
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
1110
+ var(
1111
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-br,
1112
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-br)
1113
+ )
1114
+ );
1115
+ --_sf-sd-sw-hr: var(
1116
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-hr,
1117
+ var(
1118
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-hr,
1119
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-hr)
1120
+ )
1121
+ );
1122
+ --_sf-sd-sw-cr: var(
1123
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
1124
+ var(
1125
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-cr,
1126
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-sw-cr)
1127
+ )
1128
+ );
1129
+
1130
+ // for font
1131
+
1132
+ --_sf-sd-cr: var(
1133
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-cr,
1134
+ var(
1135
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-cr,
1136
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-cr)
1137
+ )
1138
+ );
1139
+ --_sf-sd-ft-fy: var(
1140
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-fy,
1141
+ var(
1142
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-fy,
1143
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-fy)
1144
+ )
1145
+ );
1146
+ --_sf-sd-ft-se: var(
1147
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se,
1148
+ var(
1149
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se,
1150
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se)
1151
+ )
1152
+ );
1153
+ --_sf-sd-ft-wt: var(
1154
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-wt,
1155
+ var(
1156
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-wt,
1157
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-wt)
1158
+ )
1159
+ );
1160
+ --_sf-sd-ft-se-ic: var(
1161
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se-ic,
1162
+ var(
1163
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se-ic,
1164
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-ft-se-ic)
1165
+ )
1166
+ );
1167
+ --_sf-sd-tt-an: var(
1168
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-an,
1169
+ var(
1170
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-an,
1171
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-tt-an)
1172
+ )
1173
+ );
1174
+ --_sf-sd-lr-sg: var(
1175
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-lr-sg,
1176
+ var(
1177
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-lr-sg,
1178
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-lr-sg)
1179
+ )
1180
+ );
1181
+ --_sf-sd-le-ht: var(
1182
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-le-ht,
1183
+ var(
1184
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-le-ht,
1185
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-sd-se-le-ht)
1186
+ )
1187
+ );
1188
+
1189
+ --_sf-sd-ue: var(
1190
+ --_ctm-mob-dn-on-ve-se-sd-se-ue,
1191
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue))
1192
+ );
1193
+
1194
+ border-color: var(
1195
+ --_sf-sd-br-cr,
1196
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-cr)
1197
+ );
1198
+
1199
+ background-color: var(
1200
+ --_sf-sd-bd-cr,
1201
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-bd-cr)
1202
+ );
1203
+ border-style: var(
1204
+ --_sf-sd-br-se,
1205
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-se)
1206
+ );
1207
+ border-width: var(
1208
+ --_sf-sd-br-wh,
1209
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-br-wh)
1210
+ );
1211
+
1212
+ box-shadow: var(
1213
+ --_sf-sd-sw-ae,
1214
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-ae)
1215
+ )
1216
+ var(
1217
+ --_sf-sd-sw-br,
1218
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-br)
1219
+ )
1220
+ var(
1221
+ --_sf-sd-sw-sd,
1222
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-sd)
1223
+ )
1224
+ var(
1225
+ --_sf-sd-sw-cr,
1226
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-sw-cr)
1227
+ );
1228
+ // font is pending
1229
+
1230
+ color: var(
1231
+ --_sf-sd-cr,
1232
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-cr)
1233
+ );
1234
+ font-family: var(
1235
+ --_sf-sd-ft-fy,
1236
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-fy)
1237
+ );
1238
+ font-size: var(
1239
+ --_sf-sd-ft-se,
1240
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se)
1241
+ );
1242
+ font-weight: var(
1243
+ --_sf-sd-ft-wt,
1244
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-wt)
1245
+ );
1246
+ font-style: var(
1247
+ --_sf-sd-ft-se-ic,
1248
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ft-se-ic)
1249
+ );
1250
+ text-align: var(
1251
+ --_sf-sd-tt-an,
1252
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-tt-an)
1253
+ );
1254
+ letter-spacing: var(
1255
+ --_sf-sd-lr-sg,
1256
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-lr-sg)
1257
+ );
1258
+ line-height: var(
1259
+ --_sf-sd-le-ht,
1260
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-le-ht-dc)
1261
+ );
1262
+ text-decoration: var(
1263
+ --_sf-sd-ue,
1264
+ prepareMediaVariable(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-se-on-ve-se-dt-se-ue)
1265
+ );
1266
+ }
1267
+
1268
+ &.selected__child {
1269
+ border: 0px;
1270
+ border-bottom: 2px solid var(--_primary-400);
1271
+ }
1272
+ // &.disabled {
1273
+ // cursor: not-allowed;
1274
+ // opacity: 0.4;
1275
+ // position: relative;
1276
+ // overflow: hidden;
1277
+ // &::after {
1278
+ // content: "";
1279
+ // width: 172%;
1280
+ // height: 1px;
1281
+ // position: absolute;
1282
+ // background: #f00;
1283
+ // left: -14px;
1284
+ // transform: rotate(48deg);
1285
+ // /* -webkit-transform: rotate(48deg); */
1286
+ // -moz-transform: rotate(48deg);
1287
+ // top: 14px;
1288
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1289
+ // }
1290
+ // &::before {
1291
+ // content: "";
1292
+ // width: 164%;
1293
+ // height: 1px;
1294
+ // position: absolute;
1295
+ // background: #f00;
1296
+ // left: -14px;
1297
+ // transform: rotate(-48deg);
1298
+ // -webkit-transform: rotate(-48deg);
1299
+ // -moz-transform: rotate(-48deg);
1300
+ // top: 14px;
1301
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1302
+ // }
1303
+ // }
1304
+ position: relative;
1305
+
1306
+ &.disabled {
1307
+ color: #aaa;
1308
+ background-color: #f9f9f9;
1309
+ border-color: #ddd;
1310
+ cursor: not-allowed;
1311
+ overflow: hidden;
1312
+ }
1313
+
1314
+ .cross-line {
1315
+ position: absolute;
1316
+ inset: 0;
1317
+ background-color: #cccccc;
1318
+ clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
1319
+ pointer-events: none;
1320
+ }
1321
+ }
1322
+ }
1323
+ }
1324
+ &[data-show-divider="true"] {
1325
+ &:not(:last-child)::after {
1326
+ content: "";
1327
+ position: relative;
1328
+ background-color: #000;
1329
+ height: 1px;
1330
+ width: 100%;
1331
+ display: flex;
1332
+ top: calc(
1333
+ calc(
1334
+ var(
1335
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1336
+ var(
1337
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1338
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
1339
+ )
1340
+ ) +
1341
+ 10px
1342
+ ) /
1343
+ 2
1344
+ );
1345
+ }
1346
+ }
1347
+
1348
+ .title {
1349
+ margin-bottom: 4px;
1350
+ color: var(
1351
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr,
1352
+ var(
1353
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr,
1354
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr)
1355
+ )
1356
+ );
1357
+ font-family: var(
1358
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy,
1359
+ var(
1360
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy,
1361
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy)
1362
+ )
1363
+ );
1364
+ font-size: var(
1365
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se,
1366
+ var(
1367
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se,
1368
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se)
1369
+ )
1370
+ );
1371
+ font-weight: var(
1372
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt,
1373
+ var(
1374
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt,
1375
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt)
1376
+ )
1377
+ );
1378
+ font-style: var(
1379
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic,
1380
+ var(
1381
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic,
1382
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se-ic)
1383
+ )
1384
+ );
1385
+ text-align: var(
1386
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an,
1387
+ var(
1388
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an,
1389
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an)
1390
+ )
1391
+ );
1392
+ letter-spacing: var(
1393
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg,
1394
+ var(
1395
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg,
1396
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg)
1397
+ )
1398
+ );
1399
+ line-height: var(
1400
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht,
1401
+ var(
1402
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht,
1403
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht)
1404
+ )
1405
+ );
1406
+ text-decoration: var(
1407
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue,
1408
+ var(
1409
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue,
1410
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue)
1411
+ )
1412
+ );
1413
+ }
1414
+ }
1415
+ //Dropdown
1416
+ .est__dropdown__main {
1417
+ position: relative;
1418
+ width: 100%;
1419
+ display: flex;
1420
+ flex-direction: column;
1421
+ gap: var(
1422
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
1423
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg, var(--_ctm-dn-lt-on-te-ve-sg))
1424
+ );
1425
+
1426
+ padding: var(
1427
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-os-pg,
1428
+ var(
1429
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-os-pg,
1430
+ var(--_ctm-dn-lt-dn-dy-se-dn-os-pg)
1431
+ )
1432
+ );
1433
+
1434
+ margin-top: 10px;
1435
+
1436
+ label {
1437
+ font-size: var(
1438
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se,
1439
+ var(
1440
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se,
1441
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-se)
1442
+ )
1443
+ );
1444
+ font-family: var(
1445
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy,
1446
+ var(
1447
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy,
1448
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-fy)
1449
+ )
1450
+ );
1451
+ color: var(
1452
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr,
1453
+ var(
1454
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr,
1455
+ var(--_gray-700, var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-cr))
1456
+ )
1457
+ );
1458
+ font-weight: var(
1459
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt,
1460
+ var(
1461
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt,
1462
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ft-wt)
1463
+ )
1464
+ );
1465
+ text-decoration: var(
1466
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue,
1467
+ var(
1468
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue,
1469
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-ue)
1470
+ )
1471
+ );
1472
+ letter-spacing: var(
1473
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg,
1474
+ var(
1475
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg,
1476
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-lr-sg)
1477
+ )
1478
+ );
1479
+ text-align: var(
1480
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an,
1481
+ var(
1482
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an,
1483
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-tt-an)
1484
+ )
1485
+ );
1486
+ line-height: var(
1487
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht,
1488
+ var(
1489
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht,
1490
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-on-te-le-ht)
1491
+ )
1492
+ );
1493
+ display: block;
1494
+ }
1495
+
1496
+ .est__dropdown {
1497
+ cursor: pointer;
1498
+ position: relative;
1499
+ color: var(--_gray-700);
1500
+
1501
+ border-radius: 6px;
1502
+ background-color: #fff;
1503
+ display: flex;
1504
+ justify-content: space-between;
1505
+ align-items: center;
1506
+ width: 100%;
1507
+ .value__selected {
1508
+ width: 100%;
1509
+ }
1510
+
1511
+ &.open .list {
1512
+ display: none;
1513
+ margin-top: var(
1514
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-on-ad-lt-sg,
1515
+ var(
1516
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-on-ad-lt-sg,
1517
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-on-ad-lt-sg)
1518
+ )
1519
+ );
1520
+ gap: var(
1521
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
1522
+ var(
1523
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
1524
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg)
1525
+ )
1526
+ );
1527
+ background-color: var(
1528
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr,
1529
+ var(
1530
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr,
1531
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr)
1532
+ )
1533
+ );
1534
+ }
1535
+
1536
+ .list {
1537
+ display: flex !important;
1538
+ flex-direction: column;
1539
+ gap: var(
1540
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
1541
+ var(
1542
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
1543
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg)
1544
+ )
1545
+ );
1546
+ border: var(
1547
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-wh,
1548
+ var(
1549
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-wh,
1550
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-wh)
1551
+ )
1552
+ )
1553
+ var(
1554
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-se,
1555
+ var(
1556
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-se,
1557
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-se)
1558
+ )
1559
+ )
1560
+ var(
1561
+ --_gray-200,
1562
+ var(
1563
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-cr,
1564
+ var(
1565
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-cr,
1566
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-cr)
1567
+ )
1568
+ )
1569
+ );
1570
+ border-radius: var(
1571
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-rs,
1572
+ var(
1573
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-rs,
1574
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-br-rs)
1575
+ )
1576
+ );
1577
+ box-shadow: var(
1578
+ --_show-shadow-dn-se,
1579
+ var(
1580
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-ae,
1581
+ var(
1582
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-ae,
1583
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-ae)
1584
+ )
1585
+ )
1586
+ var(
1587
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-br,
1588
+ var(
1589
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-br,
1590
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-br)
1591
+ )
1592
+ )
1593
+ var(
1594
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-sd,
1595
+ var(
1596
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-sd,
1597
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-sd)
1598
+ )
1599
+ )
1600
+ var(
1601
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-cr,
1602
+ var(
1603
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-cr,
1604
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-sw-cr)
1605
+ )
1606
+ )
1607
+ );
1608
+ position: absolute;
1609
+ top: 100%;
1610
+ left: 0;
1611
+ width: 100%;
1612
+ background-color: var(
1613
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr,
1614
+ var(
1615
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr,
1616
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-dn-dn-se-bd-cr)
1617
+ )
1618
+ );
1619
+ border-radius: 4px;
1620
+ z-index: var(--_higher-zIndex);
1621
+ max-height: 200px;
1622
+ overflow-y: auto;
1623
+
1624
+ &.top {
1625
+ bottom: 100%;
1626
+ top: auto;
1627
+ }
1628
+
1629
+ .list__option {
1630
+ padding: var(
1631
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-pg,
1632
+ var(
1633
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-pg,
1634
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-pg)
1635
+ )
1636
+ );
1637
+ cursor: pointer;
1638
+
1639
+ &:hover {
1640
+ background-color: var(--_primary-25);
1641
+ color: var(--_primary-400);
1642
+ }
1643
+
1644
+ &.disabled {
1645
+ cursor: not-allowed;
1646
+ opacity: 0.4;
1647
+ }
1648
+ }
1649
+ }
1650
+ }
1651
+ }
1652
+
1653
+ // variant dropdown selection
1654
+ .var__drop__selection {
1655
+ display: flex;
1656
+ width: 100%;
1657
+ gap: var(
1658
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
1659
+ var(
1660
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
1661
+ var(
1662
+ --_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
1663
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
1664
+ )
1665
+ )
1666
+ );
1667
+
1668
+ flex-direction: row;
1669
+ &[data-dropdown-style="Vertical List"] {
1670
+ flex-direction: column;
1671
+ gap: var(
1672
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1673
+ var(
1674
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1675
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
1676
+ )
1677
+ );
1678
+ }
1679
+ .dropdown_wrapper {
1680
+ position: relative;
1681
+ &[data-show-divider="true"] {
1682
+ &:not(:last-child)::after {
1683
+ content: "";
1684
+ position: relative;
1685
+ background-color: #000;
1686
+ height: 1px;
1687
+ width: 100%;
1688
+ display: flex;
1689
+ top: calc(
1690
+ calc(
1691
+ var(
1692
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1693
+ var(
1694
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1695
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
1696
+ )
1697
+ ) +
1698
+ 10px
1699
+ ) /
1700
+ 2
1701
+ );
1702
+ }
1703
+ }
1704
+
1705
+ &[data-show-item-divider="true"] {
1706
+ .est__dropdown__main {
1707
+ .est__dropdown {
1708
+ .list {
1709
+ :not(:last-child).list__option {
1710
+ &::after {
1711
+ content: "";
1712
+ position: relative;
1713
+ background-color: #000;
1714
+ height: 1px;
1715
+ width: 100%;
1716
+ display: flex;
1717
+ top: calc(
1718
+ var(
1719
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
1720
+ var(
1721
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg,
1722
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-dy-se-dn-lt-im-sg)
1723
+ )
1724
+ ) /
1725
+ 2
1726
+ );
1727
+ }
1728
+ }
1729
+ }
1730
+ }
1731
+ }
1732
+ }
1733
+ }
1734
+ & > div {
1735
+ width: 100%;
1736
+ }
1737
+ }
1738
+ // Quantity Fields
1739
+ .field__group {
1740
+ // display: flex;
1741
+ // flex-wrap: wrap;
1742
+ // gap: 8px;
1743
+ display: grid;
1744
+ grid-template-columns: repeat(
1745
+ auto-fit,
1746
+ minmax(
1747
+ var(
1748
+ --_ctm-mob-var-lt-mn-cn-wh,
1749
+ var(--_ctm-tab-var-lt-mn-cn-wh, var(--_ctm-var-lt-mn-cn-wh))
1750
+ ),
1751
+ var(--_ctm-mob-var-lt-mn-cn-wh)
1752
+ )
1753
+ );
1754
+ gap: var(
1755
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-rw-sg,
1756
+ var(
1757
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-rw-sg,
1758
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-rw-sg)
1759
+ )
1760
+ );
1761
+ .field__group__item {
1762
+ font-size: 16px;
1763
+ display: flex;
1764
+ flex-direction: column;
1765
+ align-items: center;
1766
+ justify-content: center;
1767
+ gap: 8px;
1768
+ input[type="number"] {
1769
+ // width: 70px !important;
1770
+ width: 100%;
1771
+ border: 1px solid var(--_gray-300);
1772
+ padding-inline: 10px;
1773
+ border-radius: 4px;
1774
+ text-align: center;
1775
+ height: 40px;
1776
+ &:focus-within {
1777
+ border: 1px solid var(--_primary-200);
1778
+ box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
1779
+ }
1780
+ &:disabled {
1781
+ cursor: not-allowed;
1782
+ opacity: 0.4;
1783
+ }
1784
+ }
1785
+ }
1786
+ }
1787
+ // Enter quantity styles
1788
+ .quantiy__details {
1789
+ display: flex;
1790
+ flex-direction: column;
1791
+ gap: var(
1792
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg,
1793
+ var(
1794
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg,
1795
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg)
1796
+ )
1797
+ );
1798
+ padding: var(
1799
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg,
1800
+ var(
1801
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg,
1802
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg)
1803
+ )
1804
+ );
1805
+
1806
+ .title {
1807
+ display: flex;
1808
+ justify-content: space-between;
1809
+ align-items: center;
1810
+ font-weight: 600;
1811
+ font-size: 18px;
1812
+ & > button {
1813
+ border-bottom: 1px solid var(--_gray-400);
1814
+ color: var(--_gray-600);
1815
+ font-size: 14px;
1816
+ }
1817
+ }
1818
+ .fit__details {
1819
+ display: flex;
1820
+ flex-direction: column;
1821
+ gap: 12px;
1822
+ .fit__desc {
1823
+ display: flex;
1824
+ flex-direction: column;
1825
+ gap: var(
1826
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1827
+ var(
1828
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1829
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg)
1830
+ )
1831
+ );
1832
+
1833
+ font-size: 16px;
1834
+ color: var(--_gray-900);
1835
+ .each__price {
1836
+ font-weight: 600;
1837
+ }
1838
+ }
1839
+ }
1840
+ }
1841
+ .grouped_items {
1842
+ display: flex;
1843
+ flex-direction: column;
1844
+ gap: var(
1845
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1846
+ var(
1847
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1848
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
1849
+ )
1850
+ );
1851
+
1852
+ .tab__accordion {
1853
+ display: flex;
1854
+ flex-direction: column;
1855
+ gap: var(
1856
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1857
+ var(
1858
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1859
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
1860
+ )
1861
+ );
1862
+
1863
+ .tab__container {
1864
+ display: flex;
1865
+ flex-direction: column;
1866
+
1867
+ .tab {
1868
+ &:first-child {
1869
+ margin-bottom: var(
1870
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
1871
+ var(
1872
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg,
1873
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-on-te-ve-sg)
1874
+ )
1875
+ );
1876
+ }
1877
+ }
1878
+
1879
+ .tab__content {
1880
+ display: flex;
1881
+ flex-direction: column;
1882
+ padding: var(
1883
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg,
1884
+ var(
1885
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg,
1886
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-pg)
1887
+ )
1888
+ );
1889
+
1890
+ .field__group {
1891
+ gap: var(
1892
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg,
1893
+ var(
1894
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg,
1895
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-sg)
1896
+ )
1897
+ );
1898
+
1899
+ .field__group__item {
1900
+ gap: var(
1901
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1902
+ var(
1903
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1904
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-gp-hr-ad-on-sg)
1905
+ )
1906
+ );
1907
+ }
1908
+ }
1909
+ }
1910
+ }
1911
+ }
1912
+
1913
+ &[data-show-divider="true"] {
1914
+ & > div {
1915
+ &:not(:last-child)::after {
1916
+ content: "";
1917
+ position: relative;
1918
+ background-color: #000;
1919
+ height: 1px;
1920
+ width: 100%;
1921
+ display: flex;
1922
+ top: calc(
1923
+ var(
1924
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1925
+ var(
1926
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1927
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
1928
+ )
1929
+ ) /
1930
+ 2
1931
+ );
1932
+ }
1933
+ }
1934
+
1935
+ .tab__accordion {
1936
+ &:not(:last-child)::after {
1937
+ content: "";
1938
+ position: relative;
1939
+ background-color: #000;
1940
+ height: 1px;
1941
+ width: 100%;
1942
+ display: flex;
1943
+ top: calc(
1944
+ var(
1945
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1946
+ var(
1947
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
1948
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
1949
+ )
1950
+ ) /
1951
+ 2
1952
+ );
1953
+ }
1954
+ }
1955
+ }
1956
+ }
1957
+ // tabs
1958
+ .tabs__container {
1959
+ display: flex;
1960
+ position: relative;
1961
+ .tab {
1962
+ flex: 1;
1963
+ padding-block: 20px;
1964
+ font-weight: 600;
1965
+ text-align: center;
1966
+ cursor: pointer;
1967
+ position: relative;
1968
+ &.tab__active {
1969
+ font-weight: bold;
1970
+ }
1971
+ }
1972
+ .tab__active-indicator {
1973
+ position: absolute;
1974
+ bottom: 0;
1975
+ left: 0;
1976
+ height: 2px;
1977
+ background-color: #000;
1978
+ transition:
1979
+ left 0.3s ease,
1980
+ width 0.3s ease;
1981
+ }
1982
+ }
1983
+
1984
+ // accordion tabs
1985
+ .tab__accordion_wrapper {
1986
+ .tab__accordion {
1987
+ display: flex;
1988
+ flex-direction: column;
1989
+ padding: var(
1990
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg,
1991
+ var(
1992
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg,
1993
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg)
1994
+ )
1995
+ );
1996
+
1997
+ .tab__container {
1998
+ display: flex;
1999
+ flex-direction: column;
2000
+ gap: var(
2001
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg,
2002
+ var(
2003
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg,
2004
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg)
2005
+ )
2006
+ );
2007
+
2008
+ .tab_acc_wrapper {
2009
+ display: flex;
2010
+ flex-direction: column;
2011
+ gap: var(
2012
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-ad-cr-sg,
2013
+ var(
2014
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-ad-cr-sg,
2015
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-ad-cr-sg)
2016
+ )
2017
+ );
2018
+
2019
+ padding: var(
2020
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-vl-pg,
2021
+ var(
2022
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-vl-pg,
2023
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-vl-pg)
2024
+ )
2025
+ )
2026
+ var(
2027
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-hl-pg,
2028
+ var(
2029
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-hl-pg,
2030
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-hl-pg)
2031
+ )
2032
+ );
2033
+
2034
+ .tab {
2035
+ display: flex;
2036
+ padding-inline: 2px;
2037
+ position: relative;
2038
+ cursor: pointer;
2039
+ flex-direction: row;
2040
+ &[data-expand-icon="Left"] {
2041
+ flex-direction: row-reverse;
2042
+ justify-content: flex-end;
2043
+ }
2044
+ &[data-item-dividers="true"] {
2045
+ &::after {
2046
+ content: "";
2047
+ position: absolute;
2048
+ bottom: 0;
2049
+ height: 2px;
2050
+ width: 100%;
2051
+ border-bottom: 1px solid var(--_gray-200);
2052
+ }
2053
+ }
2054
+ span {
2055
+ padding-block: 12px;
2056
+ display: inline-block;
2057
+ }
2058
+ .active {
2059
+ border-bottom: 2px solid var(--_primary-400);
2060
+ }
2061
+ &.inactive {
2062
+ height: 0px;
2063
+ }
2064
+ }
2065
+ .tab__content {
2066
+ &.d-none {
2067
+ display: none;
2068
+ }
2069
+ &.d-block {
2070
+ display: block;
2071
+ }
2072
+ }
2073
+ }
2074
+ }
2075
+ }
2076
+
2077
+ &[data-show-dividers="true"] {
2078
+ .tab__accordion {
2079
+ .tab__container {
2080
+ .tab_acc_wrapper {
2081
+ &:not(:last-child)::after {
2082
+ content: "";
2083
+ position: relative;
2084
+ background-color: #000;
2085
+ height: 1px;
2086
+ width: 100%;
2087
+ display: flex;
2088
+ top: calc(
2089
+ var(
2090
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg,
2091
+ var(
2092
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg,
2093
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-an-sg)
2094
+ )
2095
+ ) /
2096
+ 2
2097
+ );
2098
+ }
2099
+ }
2100
+ }
2101
+ }
2102
+ }
2103
+
2104
+ &[data-icon-position="Left"] {
2105
+ .tab__accordion {
2106
+ .tab__container {
2107
+ .tab_acc_wrapper {
2108
+ .tab {
2109
+ flex-direction: row-reverse;
2110
+ align-self: flex-start;
2111
+ }
2112
+ }
2113
+ }
2114
+ }
2115
+ }
2116
+ }
2117
+
2118
+ // table
2119
+ .table_container,
2120
+ .tab__content {
2121
+ .table__class {
2122
+ border: 1px solid var(--_gray-200);
2123
+ border-radius: 8px;
2124
+ .custom__table {
2125
+ border: 1px solid var(--_gray-200);
2126
+ width: 100%;
2127
+ table-layout: fixed;
2128
+ // height: 300px;
2129
+
2130
+ border-collapse: collapse;
2131
+ &[data-header-divider="true"] {
2132
+ thead tr th {
2133
+ border-bottom: 1px solid var(--_gray-200);
2134
+ }
2135
+ }
2136
+ &[data-row-divider="true"] {
2137
+ tbody tr td {
2138
+ border-bottom: 1px solid var(--_gray-200);
2139
+ }
2140
+ }
2141
+ &[data-column-divider="true"] {
2142
+ tbody tr td,
2143
+ thead tr th {
2144
+ border-right: 1px solid var(--_gray-200);
2145
+ }
2146
+
2147
+ tbody tr td:last-child,
2148
+ thead tr th:last-child {
2149
+ border-right: none;
2150
+ }
2151
+ }
2152
+ &[data-alternative-row-colors="true"] {
2153
+ tbody tr:nth-child(odd) {
2154
+ background-color: var(--_gray-300);
2155
+ width: 100%;
2156
+ }
2157
+ }
2158
+ thead {
2159
+ height: var(
2160
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht,
2161
+ var(
2162
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht,
2163
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht)
2164
+ )
2165
+ );
2166
+ th {
2167
+ height: var(
2168
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht,
2169
+ var(
2170
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht,
2171
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-ht)
2172
+ )
2173
+ );
2174
+ text-align: var(
2175
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at,
2176
+ var(
2177
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at,
2178
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at)
2179
+ )
2180
+ );
2181
+ padding: var(
2182
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-cl-pg,
2183
+ var(
2184
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-cl-pg,
2185
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-hr-cl-pg)
2186
+ )
2187
+ );
2188
+ background-color: var(--_gray-50);
2189
+ font-weight: 600;
2190
+ color: var(--_gray-600);
2191
+ word-break: break-word;
2192
+ }
2193
+ }
2194
+
2195
+ tbody {
2196
+ tr {
2197
+ border-bottom: 1px solid var(--_gray-200);
2198
+ height: var(
2199
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-ht,
2200
+ var(
2201
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-ht,
2202
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-ht)
2203
+ )
2204
+ );
2205
+ td {
2206
+ text-align: var(
2207
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at,
2208
+ var(
2209
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at,
2210
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-ct-at)
2211
+ )
2212
+ );
2213
+ padding: var(
2214
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-cl-pg,
2215
+ var(
2216
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-cl-pg,
2217
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-te-dy-se-rw-cl-pg)
2218
+ )
2219
+ );
2220
+ .disocunted__price {
2221
+ color: var(--_gray-900);
2222
+ }
2223
+ .actual__price {
2224
+ color: var(--_gray-500);
2225
+ }
2226
+ .qty__input {
2227
+ border: 1px solid var(--_gray-200);
2228
+ padding-inline: 10px;
2229
+ text-align: center;
2230
+ border-radius: 6px;
2231
+ height: 40px;
2232
+ }
2233
+ input[type="number"] {
2234
+ &:focus-within {
2235
+ border: 1px solid var(--_primary-200);
2236
+ box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
2237
+ }
2238
+ &:disabled {
2239
+ cursor: not-allowed;
2240
+ opacity: 0.4;
2241
+ }
2242
+ }
2243
+ }
2244
+ }
2245
+ }
2246
+ }
2247
+ }
2248
+ &[data-show-divider="true"] {
2249
+ & > div {
2250
+ &:not(:last-child)::after {
2251
+ content: "";
2252
+ position: relative;
2253
+ background-color: #000;
2254
+ height: 1px;
2255
+ width: 100%;
2256
+ display: flex;
2257
+ top: calc(
2258
+ var(
2259
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
2260
+ var(
2261
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg,
2262
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-im-sg)
2263
+ )
2264
+ ) /
2265
+ 2
2266
+ );
2267
+ }
2268
+ }
2269
+ }
2270
+ }
2271
+
2272
+ // horizontal tabs
2273
+ .tabs__main {
2274
+ &.tabs__vertical {
2275
+ .tabs {
2276
+ .tabs__container {
2277
+ flex-direction: column;
2278
+ min-width: 120px;
2279
+ }
2280
+ }
2281
+ }
2282
+ &.tabs__hr {
2283
+ .tabs {
2284
+ flex-direction: column;
2285
+ gap: var(
2286
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-ad-cr-sg,
2287
+ var(
2288
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-ad-cr-sg,
2289
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-ad-cr-sg)
2290
+ )
2291
+ );
2292
+
2293
+ .tabs__container {
2294
+ width: 100%;
2295
+ }
2296
+ }
2297
+ }
2298
+ .tabs {
2299
+ display: flex;
2300
+ gap: var(
2301
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tb-im-se-dt-se-tb-ad-cr-sg,
2302
+ var(
2303
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tb-im-se-dt-se-tb-ad-cr-sg,
2304
+ var(--_ctm-dn-tb-im-se-dt-se-tb-ad-cr-sg)
2305
+ )
2306
+ );
2307
+
2308
+ .tabs__container {
2309
+ display: flex;
2310
+ gap: var(
2311
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-sg,
2312
+ var(
2313
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-sg,
2314
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-sg)
2315
+ )
2316
+ );
2317
+
2318
+ .tab {
2319
+ display: flex;
2320
+ justify-content: var(--_tab-aliginment);
2321
+ padding: var(
2322
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-vl-pg,
2323
+ var(
2324
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-vl-pg,
2325
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-vl-pg)
2326
+ )
2327
+ )
2328
+ var(
2329
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-hl-pg,
2330
+ var(
2331
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-hl-pg,
2332
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-tb-hl-pg)
2333
+ )
2334
+ );
2335
+ background-color: var(
2336
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-bd-cr,
2337
+ var(
2338
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-bd-cr,
2339
+ var(--_ctm-dn-tb-im-se-dt-se-bd-cr)
2340
+ )
2341
+ );
2342
+ border-color: var(
2343
+ --_show-border-im-se,
2344
+ var(
2345
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-cr,
2346
+ var(
2347
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-cr,
2348
+ var(--_ctm-dn-tb-im-se-dt-se-br-cr)
2349
+ )
2350
+ )
2351
+ );
2352
+ border-style: var(
2353
+ --_show-border-im-se,
2354
+ var(
2355
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-se,
2356
+ var(
2357
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-se,
2358
+ var(--_ctm-dn-tb-im-se-dt-se-br-se)
2359
+ )
2360
+ )
2361
+ );
2362
+ border-width: var(
2363
+ --_show-border-im-se,
2364
+ var(
2365
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-wh,
2366
+ var(
2367
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-wh,
2368
+ var(--_ctm-dn-tb-im-se-dt-se-br-wh)
2369
+ )
2370
+ )
2371
+ );
2372
+ border-radius: var(
2373
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs,
2374
+ var(
2375
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs,
2376
+ var(--_ctm-dn-tb-im-se-dt-se-br-rs)
2377
+ )
2378
+ );
2379
+ box-shadow: var(
2380
+ --_show-shadow-im-se,
2381
+ var(
2382
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-ae,
2383
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-ae)
2384
+ ),
2385
+ var(
2386
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-br,
2387
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-br)
2388
+ ),
2389
+ var(
2390
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-sd,
2391
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-sd)
2392
+ ),
2393
+ var(
2394
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-cr,
2395
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-sw-cr)
2396
+ )
2397
+ );
2398
+ border-radius: var(
2399
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs,
2400
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-dt-se-br-rs)
2401
+ );
2402
+
2403
+ &:hover {
2404
+ background-color: var(
2405
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-bd-cr,
2406
+ var(
2407
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-bd-cr,
2408
+ var(--_ctm-dn-tb-im-se-hr-se-bd-cr)
2409
+ )
2410
+ );
2411
+ border-color: var(
2412
+ --_show-border-im-se,
2413
+ var(
2414
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-cr,
2415
+ var(
2416
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-cr,
2417
+ var(--_ctm-dn-tb-im-se-hr-se-br-cr)
2418
+ )
2419
+ )
2420
+ );
2421
+ border-style: var(
2422
+ --_show-border-im-se,
2423
+ var(
2424
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-se,
2425
+ var(
2426
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-se,
2427
+ var(--_ctm-dn-tb-im-se-hr-se-br-se)
2428
+ )
2429
+ )
2430
+ );
2431
+ border-width: var(
2432
+ --_show-border-im-se,
2433
+ var(
2434
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-wh,
2435
+ var(
2436
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-wh,
2437
+ var(--_ctm-dn-tb-im-se-hr-se-br-wh)
2438
+ )
2439
+ )
2440
+ );
2441
+ border-radius: var(
2442
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-rs,
2443
+ var(
2444
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-br-rs,
2445
+ var(--_ctm-dn-tb-im-se-hr-se-br-rs)
2446
+ )
2447
+ );
2448
+ box-shadow: var(
2449
+ --_show-shadow-im-se,
2450
+ var(
2451
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-ae,
2452
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-ae)
2453
+ ),
2454
+ var(
2455
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-br,
2456
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-br)
2457
+ ),
2458
+ var(
2459
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-sd,
2460
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-sd)
2461
+ ),
2462
+ var(
2463
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-cr,
2464
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-hr-se-sw-cr)
2465
+ )
2466
+ );
2467
+ }
2468
+
2469
+ &.active {
2470
+ background-color: var(
2471
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-bd-cr,
2472
+ var(
2473
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-bd-cr,
2474
+ var(--_ctm-dn-tb-im-se-sd-se-bd-cr)
2475
+ )
2476
+ );
2477
+ border-color: var(
2478
+ --_show-border-im-se,
2479
+ var(
2480
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-cr,
2481
+ var(
2482
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-cr,
2483
+ var(--_ctm-dn-tb-im-se-sd-se-br-cr)
2484
+ )
2485
+ )
2486
+ );
2487
+ border-style: var(
2488
+ --_show-border-im-se,
2489
+ var(
2490
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-se,
2491
+ var(
2492
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-se,
2493
+ var(--_ctm-dn-tb-im-se-sd-se-br-se)
2494
+ )
2495
+ )
2496
+ );
2497
+ border-width: var(
2498
+ --_show-border-im-se,
2499
+ var(
2500
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-wh,
2501
+ var(
2502
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-wh,
2503
+ var(--_ctm-dn-tb-im-se-sd-se-br-wh)
2504
+ )
2505
+ )
2506
+ );
2507
+ border-radius: var(
2508
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-rs,
2509
+ var(
2510
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-br-rs,
2511
+ var(--_ctm-dn-tb-im-se-sd-se-br-rs)
2512
+ )
2513
+ );
2514
+ box-shadow: var(
2515
+ --_show-shadow-im-se,
2516
+ var(
2517
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-ae,
2518
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-ae)
2519
+ ),
2520
+ var(
2521
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-br,
2522
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-br)
2523
+ ),
2524
+ var(
2525
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-sd,
2526
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-sd)
2527
+ ),
2528
+ var(
2529
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-cr,
2530
+ var(--_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-dn-tb-im-se-sd-se-sw-cr)
2531
+ )
2532
+ );
2533
+ }
2534
+ }
2535
+ }
2536
+ .tab__content {
2537
+ padding: var(
2538
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg,
2539
+ var(
2540
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg,
2541
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-gd-os-dy-se-cr-pg)
2542
+ )
2543
+ );
2544
+ }
2545
+ }
2546
+ }
2547
+
2548
+ // embla
2549
+
2550
+ .embla {
2551
+ width: 100%;
2552
+ height: 100%;
2553
+ position: relative;
2554
+ display: flex;
2555
+ flex-direction: column;
2556
+
2557
+ // overflow: hidden;
2558
+
2559
+ .embla__viewport {
2560
+ width: 100%;
2561
+ height: 100%;
2562
+ position: relative;
2563
+ display: flex;
2564
+ flex-direction: column;
2565
+
2566
+ overflow: hidden;
2567
+
2568
+ .embla__container {
2569
+ width: 100%;
2570
+ height: 100%;
2571
+ display: flex;
2572
+ grid-template-rows: 100%;
2573
+ // grid-template-columns: 100%;
2574
+ // grid-template-columns: repeat(
2575
+ // var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-is-pr-se),
2576
+ // calc(100% / var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-is-pr-se))
2577
+ // );
2578
+ // grid-auto-flow: column;
2579
+ gap: var(
2580
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-sg,
2581
+ var(
2582
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-sg,
2583
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-sh-im-sg)
2584
+ )
2585
+ );
2586
+
2587
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
2588
+ height: calc(
2589
+ 100% - calc(
2590
+ var(
2591
+ --_ctm-mob-dn-pn-as-aw-se,
2592
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2593
+ ) +
2594
+ 8px
2595
+ )
2596
+ );
2597
+ }
2598
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
2599
+ height: calc(
2600
+ 100% - calc(
2601
+ var(
2602
+ --_ctm-mob-dn-pn-le-le-ht,
2603
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2604
+ ) +
2605
+ 20px
2606
+ )
2607
+ );
2608
+ }
2609
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
2610
+ height: calc(
2611
+ 100% - calc(
2612
+ var(
2613
+ --_ctm-mob-dn-pn-ds-dt-se,
2614
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2615
+ ) +
2616
+ 20px
2617
+ )
2618
+ );
2619
+ }
2620
+
2621
+ .embla__slide {
2622
+ // width: 100%;
2623
+ height: 100%;
2624
+ }
2625
+ }
2626
+ }
2627
+
2628
+ .arrow-navigation {
2629
+ display: flex;
2630
+ position: absolute;
2631
+ top: 50%;
2632
+ left: 50%;
2633
+ width: 100%;
2634
+ justify-content: space-between;
2635
+ transform: translate(-50%, -50%);
2636
+ // padding-left: 20px;
2637
+ &[data-control-type="Side"] {
2638
+ .left-button,
2639
+ .right-button {
2640
+ background-color: transparent;
2641
+ }
2642
+ }
2643
+ &[data-background-shape="Round"] {
2644
+ .left-button,
2645
+ .right-button {
2646
+ background-color: #f2f5f5;
2647
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
2648
+ }
2649
+ }
2650
+ &[data-control-type="Bottom-Overflow"] {
2651
+ transform: translateX(-50%);
2652
+ width: 100%;
2653
+ justify-content: center;
2654
+ gap: 12px;
2655
+ top: unset;
2656
+ bottom: 6px;
2657
+ }
2658
+ &[data-control-type="Bottom"] {
2659
+ transform: unset;
2660
+ position: static;
2661
+ width: 100%;
2662
+ justify-content: center;
2663
+ gap: 12px;
2664
+ margin-top: 10px;
2665
+ }
2666
+ .left-button {
2667
+ padding: 10px;
2668
+ border-radius: 50%;
2669
+ border: none;
2670
+ width: var(
2671
+ --_ctm-mob-dn-pn-as-aw-se,
2672
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2673
+ );
2674
+ height: var(
2675
+ --_ctm-mob-dn-pn-as-aw-se,
2676
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2677
+ );
2678
+
2679
+ display: flex;
2680
+ align-items: center;
2681
+ justify-content: center;
2682
+ cursor: pointer;
2683
+ outline: none;
2684
+ margin-left: 12px;
2685
+ &:disabled {
2686
+ & svg {
2687
+ path {
2688
+ stroke: rgb(192, 192, 192);
2689
+ }
2690
+ }
2691
+ }
2692
+ }
2693
+ .right-button {
2694
+ border-radius: 50%;
2695
+ border: none;
2696
+ width: var(
2697
+ --_ctm-mob-dn-pn-as-aw-se,
2698
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2699
+ );
2700
+ height: var(
2701
+ --_ctm-mob-dn-pn-as-aw-se,
2702
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2703
+ );
2704
+
2705
+ display: flex;
2706
+ align-items: center;
2707
+ justify-content: center;
2708
+ cursor: pointer;
2709
+ outline: none;
2710
+ margin-right: 12px;
2711
+ padding: 10px;
2712
+
2713
+ &:disabled {
2714
+ & svg {
2715
+ path {
2716
+ stroke: rgb(192, 192, 192);
2717
+ }
2718
+ }
2719
+ }
2720
+ }
2721
+ .icon {
2722
+ display: flex;
2723
+ svg {
2724
+ width: calc(
2725
+ var(
2726
+ --_ctm-mob-dn-pn-as-aw-se,
2727
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2728
+ ) *
2729
+ 0.5
2730
+ );
2731
+ height: calc(
2732
+ var(
2733
+ --_ctm-mob-dn-pn-as-aw-se,
2734
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2735
+ ) *
2736
+ 0.5
2737
+ );
2738
+ path {
2739
+ stroke: var(
2740
+ --_ctm-mob-dn-pn-as-aw-cr,
2741
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
2742
+ );
2743
+ }
2744
+ }
2745
+ }
2746
+ }
2747
+
2748
+ &[data-thumbnail-placement="top"] {
2749
+ flex-direction: column-reverse;
2750
+ }
2751
+ &[data-thumbnail-placement="bottom"] {
2752
+ flex-direction: column;
2753
+ }
2754
+ &[data-thumbnail-placement="left"] {
2755
+ flex-direction: row-reverse;
2756
+
2757
+ .embla__thumbs {
2758
+ width: var(
2759
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
2760
+ var(
2761
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
2762
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se)
2763
+ )
2764
+ );
2765
+
2766
+ height: 100%;
2767
+
2768
+ & .embla__thumbs__container {
2769
+ flex-direction: column;
2770
+ height: 100%;
2771
+ }
2772
+ }
2773
+ }
2774
+ &[data-thumbnail-placement="right"] {
2775
+ flex-direction: row;
2776
+ .embla__thumbs {
2777
+ width: var(
2778
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
2779
+ var(
2780
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
2781
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se)
2782
+ )
2783
+ );
2784
+
2785
+ height: 100%;
2786
+
2787
+ & .embla__thumbs__container {
2788
+ flex-direction: column;
2789
+ height: 100%;
2790
+ }
2791
+ }
2792
+ }
2793
+ &[data-control-type="Side"] {
2794
+ display: flex;
2795
+ align-self: center;
2796
+ flex-direction: row;
2797
+ .left-button:disabled,
2798
+ .right-button:disabled {
2799
+ display: none;
2800
+ }
2801
+ }
2802
+ .embla__dots {
2803
+ display: flex;
2804
+ flex-wrap: wrap;
2805
+ justify-content: center;
2806
+ align-items: center;
2807
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
2808
+ gap: 6px;
2809
+ margin-top: 16px;
2810
+
2811
+ &[data-control-type="Bottom-Overflow"] {
2812
+ position: absolute;
2813
+ bottom: 10px;
2814
+ left: 50%;
2815
+ transform: translateX(-50%);
2816
+ width: 75%;
2817
+ }
2818
+ .embla__dot {
2819
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
2820
+ -webkit-appearance: none;
2821
+ appearance: none;
2822
+ background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
2823
+ touch-action: manipulation;
2824
+ display: inline-flex;
2825
+ text-decoration: none;
2826
+ cursor: pointer;
2827
+ border: 0;
2828
+ padding: 0;
2829
+ margin: 0;
2830
+ // width: 0.6rem;
2831
+ // height: 0.6rem;
2832
+ width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2833
+ height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2834
+ display: flex;
2835
+ align-items: center;
2836
+ justify-content: center;
2837
+ border-radius: 50%;
2838
+ }
2839
+ .embla__dot:after {
2840
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
2841
+ width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2842
+ height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2843
+ border-radius: 50%;
2844
+ display: flex;
2845
+ align-items: center;
2846
+ content: "";
2847
+ }
2848
+ .embla__dot--selected:after {
2849
+ box-shadow: inset 0 0 0 1px var(--text-body);
2850
+ background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
2851
+ }
2852
+ &[data-slider-control="Pagination Line"] {
2853
+ .embla__dot {
2854
+ width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
2855
+ height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
2856
+ background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
2857
+
2858
+ border-radius: 6px;
2859
+ }
2860
+ .embla__dot--selected:after {
2861
+ box-shadow: inset 0 0 0 1px var(--text-body);
2862
+ border-radius: 6px;
2863
+ width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
2864
+ height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
2865
+ // background-color: #fff;
2866
+ background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
2867
+ }
2868
+ }
2869
+ }
2870
+
2871
+ .embla__thumbs {
2872
+ width: 100%;
2873
+ height: var(
2874
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
2875
+ var(
2876
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
2877
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se)
2878
+ )
2879
+ );
2880
+
2881
+ position: relative;
2882
+ display: grid;
2883
+ grid-template-columns: 1fr;
2884
+ overflow: hidden;
2885
+ // margin: 10px;
2886
+ padding: 10px;
2887
+
2888
+ .embla__thumbs__viewport {
2889
+ width: 100%;
2890
+ height: 100%;
2891
+ position: relative;
2892
+ display: flex;
2893
+ flex-direction: column;
2894
+
2895
+ overflow: hidden;
2896
+ }
2897
+ .embla__thumbs__container {
2898
+ display: flex;
2899
+ flex-direction: row;
2900
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
2901
+ gap: var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-sg);
2902
+ width: 100%;
2903
+ // justify-content: center;
2904
+ // height: 200px;
2905
+
2906
+ .embla__thumbs__slide {
2907
+ min-width: var(
2908
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
2909
+ var(
2910
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
2911
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se)
2912
+ )
2913
+ );
2914
+ max-width: var(
2915
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
2916
+ var(
2917
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
2918
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se)
2919
+ )
2920
+ );
2921
+ height: var(
2922
+ --_ctm-mob-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
2923
+ var(
2924
+ --_ctm-tab-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se,
2925
+ var(--_ctm-dn-pt-pl-dn-vt-pr-dn-vt-lt-tl-se)
2926
+ )
2927
+ );
2928
+ & img {
2929
+ width: 100%;
2930
+ height: 100%;
2931
+ }
2932
+ }
2933
+ }
2934
+ }
2935
+ }
2936
+ }
2937
+ }
2938
+
2939
+ .bundle_detail_product_heading_wrapper {
2940
+ display: flex;
2941
+ flex-direction: column;
2942
+ gap: 6px;
2943
+ width: 100%;
2944
+
2945
+ .bundle_detail_product_name {
2946
+ background-color: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-bd-cr);
2947
+ color: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-cr);
2948
+ font-family: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-fy);
2949
+ font-size: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-se);
2950
+ font-style: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-se-ic);
2951
+ font-weight: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ft-wt);
2952
+ line-height: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-le-ht);
2953
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-lr-sg);
2954
+ text-align: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-tt-an);
2955
+ text-decoration: var(--_ctm-dn-pt-pl-dn-pt-ne-dn-ue);
2956
+ width: 100%;
2957
+ }
2958
+
2959
+ .bundle_detail_product_info {
2960
+ background-color: var(--_ctm-dn-pt-pl-dn-pt-io-dn-bd-cr);
2961
+ color: var(--_ctm-dn-pt-pl-dn-pt-io-dn-cr);
2962
+ font-family: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-fy);
2963
+ font-size: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-se);
2964
+ font-style: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-se-ic);
2965
+ font-weight: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ft-wt);
2966
+ line-height: var(--_ctm-dn-pt-pl-dn-pt-io-dn-le-ht);
2967
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-io-dn-lr-sg);
2968
+ text-align: var(--_ctm-dn-pt-pl-dn-pt-io-dn-tt-an);
2969
+ text-decoration: var(--_ctm-dn-pt-pl-dn-pt-io-dn-ue);
2970
+ width: 100%;
2971
+ }
2972
+ }
2973
+
2974
+ .bundle_detail_product_price {
2975
+ background-color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-bd-cr);
2976
+ color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-cr);
2977
+ font-family: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-fy);
2978
+ font-size: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se);
2979
+ font-style: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se-ic);
2980
+ font-weight: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-wt);
2981
+ line-height: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-le-ht);
2982
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-lr-sg);
2983
+ text-align: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-an);
2984
+ text-decoration: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ue);
2985
+ width: 100%;
2986
+ }
2987
+
2988
+ .bundle__details__element__container {
2989
+ width: 100%;
2990
+ padding: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-pg);
2991
+ gap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-im-gp);
2992
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-rs);
2993
+ background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-bd-cr);
2994
+ max-width: 556px;
2995
+
2996
+ .bundle_details_heading_wrapper {
2997
+ display: flex;
2998
+ width: 100%;
2999
+ flex-direction: column;
3000
+ // padding: 24px 96px;
3001
+ border-bottom: 1px solid #d0d5dd;
3002
+ gap: 16px;
3003
+
3004
+ .category_card_wrapper {
3005
+ cursor: pointer;
3006
+ display: flex;
3007
+ padding: 16px;
3008
+ gap: 12px;
3009
+ background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-bd-cr);
3010
+ border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-cr);
3011
+ border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-rs);
3012
+ border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-se);
3013
+ border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-br-wh);
3014
+ box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-ae)
3015
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-br)
3016
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-sd)
3017
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-dt-se-sw-cr);
3018
+
3019
+ &:hover {
3020
+ background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-bd-cr);
3021
+ border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-cr);
3022
+ border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-rs);
3023
+ border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-se);
3024
+ border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-br-wh);
3025
+ box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-ae)
3026
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-br)
3027
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-sd)
3028
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-hr-se-sw-cr);
3029
+ }
3030
+
3031
+ &.active {
3032
+ background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-bd-cr);
3033
+ border-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-cr);
3034
+ border-radius: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-rs);
3035
+ border-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-se);
3036
+ border-width: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-br-wh);
3037
+ box-shadow: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-ae)
3038
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-br)
3039
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-sd)
3040
+ var(--_ctm-dn-cy-sr-cd-dn-cy-cd-dn-sd-se-sw-cr);
3041
+ }
3042
+
3043
+ .category_image {
3044
+ width: 48px;
3045
+ height: 72px;
3046
+ }
3047
+
3048
+ .category_card_info_wrapper {
3049
+ display: flex;
3050
+ flex-direction: column;
3051
+ gap: 4px;
3052
+ width: fit-content;
3053
+ white-space: nowrap;
3054
+
3055
+ .category_card_category_name {
3056
+ background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-bd-cr);
3057
+ color: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-cr);
3058
+ font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-fy);
3059
+ font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-se);
3060
+ font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-se-ic);
3061
+ font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ft-wt);
3062
+ line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-le-ht);
3063
+ letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-lr-sg);
3064
+ text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-tt-an);
3065
+ text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-ne-dn-ue);
3066
+ }
3067
+
3068
+ .category_card_product_count {
3069
+ background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-bd-cr);
3070
+ color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-cr);
3071
+ font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-fy);
3072
+ font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se);
3073
+ font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se-ic);
3074
+ font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-wt);
3075
+ line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-le-ht);
3076
+ letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-lr-sg);
3077
+ text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-an);
3078
+ text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ue);
3079
+ }
3080
+
3081
+ .category_card_product_select_count {
3082
+ background-color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-bd-cr);
3083
+ color: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-cr);
3084
+ font-family: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-fy);
3085
+ font-size: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se);
3086
+ font-style: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-se-ic);
3087
+ font-weight: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ft-wt);
3088
+ line-height: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-le-ht);
3089
+ letter-spacing: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-lr-sg);
3090
+ text-align: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-tt-an);
3091
+ text-decoration: var(--_ctm-dn-cy-sr-cd-dn-cy-cd-io-dn-ue);
3092
+ }
3093
+ }
3094
+ }
3095
+ }
3096
+
3097
+ .bundle_details_product_list_wrapper {
3098
+ display: flex;
3099
+ flex-direction: column;
3100
+ gap: 16px;
3101
+ // padding: 36px 96px;
3102
+ width: 100%;
3103
+
3104
+ .add_to_cart_wrapper {
3105
+ display: flex;
3106
+ flex-direction: column;
3107
+ gap: 16px;
3108
+ padding: 16px;
3109
+ width: 100%;
3110
+ background-color: #f5f5f5;
3111
+
3112
+ .add_to_cart_heading {
3113
+ border-color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-cr);
3114
+ border-radius: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-rs);
3115
+ border-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-se);
3116
+ border-width: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-br-wh);
3117
+ color: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-cr);
3118
+ font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
3119
+ font-size: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se);
3120
+ font-style: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-se-ic);
3121
+ font-weight: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-wt);
3122
+ line-height: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-le-ht);
3123
+ letter-spacing: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-lr-sg);
3124
+ box-shadow: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-ae)
3125
+ var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-br) var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-sd)
3126
+ var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-sw-cr);
3127
+ text-align: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-tt-an);
3128
+ text-decoration: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ue);
3129
+ }
3130
+
3131
+ .add_to_cart_estimator_wrapper {
3132
+ display: flex;
3133
+ gap: 48px;
3134
+ justify-content: space-between;
3135
+ width: 100%;
3136
+
3137
+ .add_to_cart_estimate_wrapper {
3138
+ display: flex;
3139
+ flex-direction: column;
3140
+ gap: 6px;
3141
+
3142
+ .add_to_cart_qty {
3143
+ width: 205px;
3144
+ border: 1px solid #d0d5dd !important;
3145
+ border-radius: 2px !important;
3146
+ outline: none;
3147
+ padding: 8px 12px !important;
3148
+ &:disabled {
3149
+ background-color: #f9fafb;
3150
+ }
3151
+ }
3152
+
3153
+ .add_to_cart_price {
3154
+ background-color: transparent;
3155
+ color: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-cr);
3156
+ font-family: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-fy);
3157
+ font-size: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se);
3158
+ font-style: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-se-ic);
3159
+ font-weight: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ft-wt);
3160
+ line-height: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-le-ht);
3161
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-lr-sg);
3162
+ text-align: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-tt-an);
3163
+ text-decoration: var(--_ctm-dn-pt-pl-dn-pt-pe-dn-ue);
3164
+ }
3165
+
3166
+ .add_to_cart_estimate_label {
3167
+ font-family: var(--_ctm-dn-be-ds-hr-dn-be-ne-dn-ft-fy);
3168
+ line-height: 150%;
3169
+ font-size: 16px;
3170
+ color: #000000;
3171
+ }
3172
+ }
3173
+ }
3174
+
3175
+ .add_to_cart_btn {
3176
+ display: flex;
3177
+ justify-content: center;
3178
+ align-items: center;
3179
+ padding: 10px 16px;
3180
+ transition: all 0.3s ease;
3181
+ background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-bd-cr);
3182
+ border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-cr);
3183
+ border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-rs);
3184
+ border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-se);
3185
+ border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-br-wh);
3186
+ color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-cr);
3187
+ font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-fy);
3188
+ font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se);
3189
+ font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-se-ic);
3190
+ font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ft-wt);
3191
+ line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-le-ht);
3192
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-lr-sg);
3193
+ box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-ae)
3194
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-br)
3195
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-sd)
3196
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-sw-cr);
3197
+ text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-tt-an);
3198
+ text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-dt-se-ue);
3199
+
3200
+ &:disabled {
3201
+ cursor: not-allowed;
3202
+ }
3203
+
3204
+ &:hover {
3205
+ background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-bd-cr);
3206
+ border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-cr);
3207
+ border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-rs);
3208
+ border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-se);
3209
+ border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-br-wh);
3210
+ color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-cr);
3211
+ font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-fy);
3212
+ font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se);
3213
+ font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-se-ic);
3214
+ font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ft-wt);
3215
+ line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-le-ht);
3216
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-lr-sg);
3217
+ box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-ae)
3218
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-br)
3219
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-sd)
3220
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-sw-cr);
3221
+ text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-tt-an);
3222
+ text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-hr-se-ue);
3223
+ }
3224
+
3225
+ &.selected {
3226
+ background-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-bd-cr);
3227
+ border-color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-cr);
3228
+ border-radius: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-rs);
3229
+ border-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-se);
3230
+ border-width: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-br-wh);
3231
+ color: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-cr);
3232
+ font-family: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-fy);
3233
+ font-size: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-se);
3234
+ font-style: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-se-ic);
3235
+ font-weight: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ft-wt);
3236
+ line-height: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-le-ht);
3237
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-lr-sg);
3238
+ box-shadow: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-ae)
3239
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-br)
3240
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-sd)
3241
+ var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-sw-cr);
3242
+ text-align: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-tt-an);
3243
+ text-decoration: var(--_ctm-dn-pt-pl-dn-ad-to-ct-bn-dn-sd-se-ue);
3244
+
3245
+ .icon {
3246
+ color: white;
3247
+ }
3248
+ }
3249
+ }
3250
+ }
3251
+
3252
+ .bundle_details_product_wrapper {
3253
+ display: flex;
3254
+ flex-direction: column;
3255
+ gap: 48px;
3256
+ width: 100%;
3257
+
3258
+ &.vertical_wrapper {
3259
+ flex-direction: row;
3260
+
3261
+ .product_card_scroll_wrapper {
3262
+ min-width: 400px;
3263
+ max-width: 400px;
3264
+ display: flex;
3265
+ flex-direction: column;
3266
+ gap: 16px;
3267
+
3268
+ .category_bundle_product_card {
3269
+ width: 100%;
3270
+ display: flex;
3271
+ padding: 16px;
3272
+ gap: 16px;
3273
+ background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-bd-cr);
3274
+ border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-cr);
3275
+ border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-rs);
3276
+ border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-se);
3277
+ border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-br-wh);
3278
+ box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-ae)
3279
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-br)
3280
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-sd)
3281
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-dt-se-sw-cr);
3282
+
3283
+ &:hover {
3284
+ background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-bd-cr);
3285
+ border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-cr);
3286
+ border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-rs);
3287
+ border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-se);
3288
+ border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-br-wh);
3289
+ box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-ae)
3290
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-br)
3291
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-sd)
3292
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-hr-se-sw-cr);
3293
+ }
3294
+
3295
+ &.active {
3296
+ background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-bd-cr);
3297
+ border-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-cr);
3298
+ border-radius: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-rs);
3299
+ border-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-se);
3300
+ border-width: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-br-wh);
3301
+ box-shadow: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-ae)
3302
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-br)
3303
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-sd)
3304
+ var(--_ctm-dn-pt-cs-sl-dn-pt-cd-dn-sd-se-sw-cr);
3305
+
3306
+ .category_bundle_product_card_product_name {
3307
+ font-weight: bolder;
3308
+ }
3309
+ }
3310
+
3311
+ .category_bundle_product_card_select {
3312
+ width: auto;
3313
+ }
3314
+
3315
+ .category_bundle_product_card_img {
3316
+ width: 80px;
3317
+ height: auto;
3318
+ }
3319
+
3320
+ .category_bundle_product_card_info {
3321
+ display: flex;
3322
+ flex-direction: column;
3323
+ gap: 24px;
3324
+
3325
+ .category_bundle_product_card_info_wrapper {
3326
+ display: flex;
3327
+ flex-direction: column;
3328
+ gap: 6px;
3329
+
3330
+ .category_bundle_product_card_product_name {
3331
+ background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-bd-cr);
3332
+ color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-cr);
3333
+ font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-fy);
3334
+ font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-se);
3335
+ font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-se-ic);
3336
+ font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ft-wt);
3337
+ line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-le-ht);
3338
+ letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-lr-sg);
3339
+ text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-tt-an);
3340
+ text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-ne-dn-ue);
3341
+ }
3342
+
3343
+ .category_bundle_product_card_brand_name {
3344
+ background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-bd-cr);
3345
+ color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-cr);
3346
+ font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-fy);
3347
+ font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se);
3348
+ font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se-ic);
3349
+ font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-wt);
3350
+ line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-le-ht);
3351
+ letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-lr-sg);
3352
+ text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-an);
3353
+ text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ue);
3354
+ }
3355
+
3356
+ .category_bundle_product_card_item_name {
3357
+ background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-bd-cr);
3358
+ color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-cr);
3359
+ font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-fy);
3360
+ font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se);
3361
+ font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-se-ic);
3362
+ font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ft-wt);
3363
+ line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-le-ht);
3364
+ letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-lr-sg);
3365
+ text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-tt-an);
3366
+ text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-io-dn-ue);
3367
+ }
3368
+ }
3369
+
3370
+ .category_bundle_product_card_product_price {
3371
+ background-color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-bd-cr);
3372
+ color: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-cr);
3373
+ font-family: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-fy);
3374
+ font-size: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se);
3375
+ font-style: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-se-ic);
3376
+ font-weight: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ft-wt);
3377
+ line-height: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-le-ht);
3378
+ letter-spacing: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-lr-sg);
3379
+ text-align: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-tt-an);
3380
+ text-decoration: var(--_ctm-dn-pt-cs-sl-dn-pt-cd-pe-dn-ue);
3381
+ }
3382
+ }
3383
+ }
3384
+ }
3385
+ }
3386
+
3387
+ .gallery {
3388
+ display: flex;
3389
+ flex-direction: column;
3390
+ gap: 16px;
3391
+
3392
+ .mainImage {
3393
+ position: relative;
3394
+ overflow: visible;
3395
+ border-radius: 8px;
3396
+ background-color: #f9fafb;
3397
+ aspect-ratio: 1 / 1;
3398
+ width: 360px;
3399
+
3400
+ &::before {
3401
+ content: "";
3402
+ display: block;
3403
+ padding-top: 100%;
3404
+ }
3405
+ }
3406
+
3407
+ .image {
3408
+ position: absolute;
3409
+ top: 0;
3410
+ left: 0;
3411
+ width: 100%;
3412
+ height: 100%;
3413
+ object-fit: cover;
3414
+ transition: transform 0.3s ease-in-out;
3415
+
3416
+ &:hover {
3417
+ transform: scale(1.05);
3418
+ }
3419
+ }
3420
+
3421
+ .thumbnails {
3422
+ display: flex;
3423
+ gap: 8px;
3424
+ }
3425
+
3426
+ .thumbnailButton {
3427
+ width: 80px;
3428
+ height: 80px;
3429
+ padding: 0;
3430
+ border: 2px solid transparent;
3431
+ border-radius: 6px;
3432
+ overflow: hidden;
3433
+ cursor: pointer;
3434
+ background: none;
3435
+ transition: border-color 0.2s ease-in-out;
3436
+
3437
+ &:hover {
3438
+ border-color: #dbeafe;
3439
+ }
3440
+
3441
+ &.active {
3442
+ border-color: #2563eb;
3443
+ }
3444
+
3445
+ &:focus {
3446
+ outline: none;
3447
+ border-color: #2563eb;
3448
+ box-shadow: 0 0 0 2px #dbeafe;
3449
+ }
3450
+ }
3451
+
3452
+ .thumbnailImage {
3453
+ width: 100%;
3454
+ height: 100%;
3455
+ object-fit: cover;
3456
+ }
3457
+ }
3458
+
3459
+ .bundle_detail_product_information {
3460
+ display: flex;
3461
+ flex-direction: column;
3462
+ flex: 1 0 0;
3463
+ width: 100%;
3464
+ gap: 24px;
3465
+
3466
+ .bundle_detail_product_image_slide_wrapper {
3467
+ display: flex;
3468
+ max-width: 40rem;
3469
+ gap: 16px;
3470
+ overflow-x: scroll;
3471
+
3472
+ .bundle_detail_product_image_slide {
3473
+ width: 148px;
3474
+ height: 248px;
3475
+ }
3476
+ }
3477
+
3478
+ .bundle_detail_product_qty_select {
3479
+ display: flex;
3480
+ justify-content: space-between;
3481
+ align-items: flex-start;
3482
+ width: 100%;
3483
+
3484
+ .add_to_cart_qty_wrapper {
3485
+ display: flex;
3486
+ flex-direction: column;
3487
+ gap: 6px;
3488
+
3489
+ .add_to_cart_qty {
3490
+ width: 205px;
3491
+ border: 1px solid #d0d5dd !important;
3492
+ border-radius: 2px !important;
3493
+ outline: none;
3494
+ padding: 8px 12px !important;
3495
+ &:disabled {
3496
+ background-color: #f9fafb;
3497
+ }
3498
+ }
3499
+
3500
+ small {
3501
+ color: red;
3502
+ }
3503
+ }
3504
+
3505
+ .select-button {
3506
+ display: flex;
3507
+ align-items: center;
3508
+ padding: 10px 16px;
3509
+ transition: all 0.3s ease;
3510
+ background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-bd-cr);
3511
+ border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-cr);
3512
+ border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-rs);
3513
+ border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-se);
3514
+ border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-br-wh);
3515
+ color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-cr);
3516
+ font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-fy);
3517
+ font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se);
3518
+ font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-se-ic);
3519
+ font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ft-wt);
3520
+ line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-le-ht);
3521
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-lr-sg);
3522
+ box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-ae)
3523
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-br)
3524
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-sd)
3525
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-sw-cr);
3526
+ text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-tt-an);
3527
+ text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-dt-se-ue);
3528
+
3529
+ &:hover {
3530
+ background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-bd-cr);
3531
+ border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-cr);
3532
+ border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-rs);
3533
+ border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-se);
3534
+ border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-br-wh);
3535
+ color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-cr);
3536
+ font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-fy);
3537
+ font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se);
3538
+ font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-se-ic);
3539
+ font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ft-wt);
3540
+ line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-le-ht);
3541
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-lr-sg);
3542
+ box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-ae)
3543
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-br)
3544
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-sd)
3545
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-sw-cr);
3546
+ text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-tt-an);
3547
+ text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-hr-se-ue);
3548
+ }
3549
+
3550
+ .icon {
3551
+ margin-right: 8px;
3552
+ color: #003366;
3553
+ }
3554
+
3555
+ &.selected {
3556
+ background-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-bd-cr);
3557
+ border-color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-cr);
3558
+ border-radius: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-rs);
3559
+ border-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-se);
3560
+ border-width: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-br-wh);
3561
+ color: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-cr);
3562
+ font-family: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-fy);
3563
+ font-size: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se);
3564
+ font-style: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-se-ic);
3565
+ font-weight: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ft-wt);
3566
+ line-height: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-le-ht);
3567
+ letter-spacing: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-lr-sg);
3568
+ box-shadow: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-ae)
3569
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-br)
3570
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-sd)
3571
+ var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-sw-cr);
3572
+ text-align: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-tt-an);
3573
+ text-decoration: var(--_ctm-dn-pt-pl-dn-st-bn-dn-sd-se-ue);
3574
+
3575
+ .icon {
3576
+ color: white;
3577
+ }
3578
+ }
3579
+ }
3580
+ }
3581
+ }
3582
+ }
3583
+
3584
+ hr {
3585
+ &:last-child {
3586
+ display: none;
3587
+ }
3588
+ }
3589
+ }
3590
+ .popover-container {
3591
+ position: relative;
3592
+ display: inline-block;
3593
+ .popover-trigger {
3594
+ cursor: pointer;
3595
+ font-weight: 500;
3596
+ color: #2b6cb0;
3597
+ }
3598
+
3599
+ .popover-box {
3600
+ // position: absolute;
3601
+ // top: calc(100% + 10px);
3602
+ // right: 0;
3603
+ // background: white;
3604
+ // padding: 12px 16px;
3605
+ // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
3606
+ // border-radius: 8px;
3607
+ // min-width: 150px;
3608
+ // z-index: 10;
3609
+ position: absolute;
3610
+ // border: 1px solid #ccc;
3611
+ min-width: 150px;
3612
+ max-width: 300px;
3613
+ z-index: 1000;
3614
+ left: 30px;
3615
+ top: 0;
3616
+ padding: 8px;
3617
+ border-radius: 4px;
3618
+ max-height: 150px;
3619
+ overflow-y: auto;
3620
+ }
3621
+
3622
+ .popover-box {
3623
+ display: flex;
3624
+ flex-direction: column;
3625
+
3626
+ // width: 100%;
3627
+ gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
3628
+ background-color: var(
3629
+ --_ctm-mob-dn-pr-se-bd-cr,
3630
+ var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
3631
+ );
3632
+
3633
+ border-color: var(
3634
+ --_ctm-mob-dn-pr-se-br-cr,
3635
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
3636
+ );
3637
+
3638
+ border-style: var(
3639
+ --_ctm-mob-dn-pr-se-br-se,
3640
+ var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
3641
+ );
3642
+
3643
+ border-width: var(
3644
+ --_ctm-mob-dn-pr-se-br-wh,
3645
+ var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
3646
+ );
3647
+
3648
+ border-radius: var(
3649
+ --_ctm-mob-dn-pr-se-br-rs,
3650
+ var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
3651
+ );
3652
+
3653
+ box-shadow: var(
3654
+ --_show-shadow,
3655
+ var(--_ctm-mob-dn-pr-se-sw-ae, var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae)))
3656
+ var(--_ctm-mob-dn-pr-se-sw-br, var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br)))
3657
+ var(--_ctm-mob-dn-pr-se-sw-sd, var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd)))
3658
+ var(--_ctm-mob-dn-pr-se-sw-cr, var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr)))
3659
+ );
3660
+
3661
+ padding: var(--_ctm-mob-dn-pr-se-pg, var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg)));
3662
+ }
3663
+
3664
+ .popover-box strong {
3665
+ display: block;
3666
+ margin-bottom: 6px;
3667
+ font-weight: bold;
3668
+ }
3669
+
3670
+ .popover-arrow {
3671
+ position: absolute;
3672
+ top: 8px;
3673
+ left: -5px;
3674
+ width: 12px;
3675
+ height: 12px;
3676
+ // background-color: var(
3677
+ // --_ctm-mob-dn-pr-se-bd-cr,
3678
+ // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
3679
+ // );
3680
+ transform: rotate(-45deg);
3681
+ box-shadow: -1px -1px 0px
3682
+ var(--_ctm-mob-dn-pr-se-br-cr, var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
3683
+ }
3684
+
3685
+ .popover_item {
3686
+ // padding-inline: var(--_sf-cd-gp);
3687
+ color: var(--_ctm-mob-dn-pr-se-cr, var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr)));
3688
+ font-family: var(
3689
+ --_ctm-mob-dn-pr-se-ft-fy,
3690
+ var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
3691
+ );
3692
+ font-size: var(
3693
+ --_ctm-mob-dn-pr-se-ft-se,
3694
+ var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
3695
+ );
3696
+ font-weight: var(
3697
+ --_ctm-mob-dn-pr-se-ft-wt,
3698
+ var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
3699
+ );
3700
+ font-style: var(
3701
+ --_ctm-mob-dn-pr-se-ft-se-ic,
3702
+ var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
3703
+ );
3704
+ text-align: var(
3705
+ --_ctm-mob-dn-pr-se-tt-an,
3706
+ var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
3707
+ );
3708
+ letter-spacing: var(
3709
+ --_ctm-mob-dn-pr-se-lr-sg,
3710
+ var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
3711
+ );
3712
+ line-height: var(
3713
+ --_ctm-mob-dn-pr-se-le-ht,
3714
+ var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
3715
+ );
3716
+ text-decoration: var(
3717
+ --_ctm-mob-dn-pr-se-ue,
3718
+ var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
3719
+ );
3720
+ // margin-left: 10px;
3721
+ }
3722
+ }
3723
+
3724
+ .error__message__wraper {
3725
+ background-color: var(
3726
+ --_ctm-mob-dn-er-me-bd-cr,
3727
+ var(--_ctm-tab-dn-er-me-bd-cr, var(--_ctm-dn-er-me-bd-cr))
3728
+ );
3729
+
3730
+ border-color: var(
3731
+ --_ctm-mob-dn-er-me-br-cr,
3732
+ var(--_ctm-tab-dn-er-me-br-cr, var(--_ctm-dn-er-me-br-cr))
3733
+ );
3734
+
3735
+ border-style: var(
3736
+ --_ctm-mob-dn-er-me-br-se,
3737
+ var(--_ctm-tab-dn-er-me-br-se, var(--_ctm-dn-er-me-br-se))
3738
+ );
3739
+
3740
+ border-width: var(
3741
+ --_ctm-mob-dn-er-me-br-wh,
3742
+ var(--_ctm-tab-dn-er-me-br-wh, var(--_ctm-dn-er-me-br-wh))
3743
+ );
3744
+
3745
+ border-radius: var(
3746
+ --_ctm-mob-dn-er-me-br-rs,
3747
+ var(--_ctm-tab-dn-er-me-br-rs, var(--_ctm-dn-er-me-br-rs))
3748
+ );
3749
+
3750
+ box-shadow: var(
3751
+ --_show-shadow,
3752
+ var(--_ctm-mob-dn-er-me-sw-ae, var(--_ctm-tab-dn-er-me-sw-ae, var(--_ctm-dn-er-me-sw-ae)))
3753
+ var(--_ctm-mob-dn-er-me-sw-br, var(--_ctm-tab-dn-er-me-sw-br, var(--_ctm-dn-er-me-sw-br)))
3754
+ var(--_ctm-mob-dn-er-me-sw-sd, var(--_ctm-tab-dn-er-me-sw-sd, var(--_ctm-dn-er-me-sw-sd)))
3755
+ var(--_ctm-mob-dn-er-me-sw-cr, var(--_ctm-tab-dn-er-me-sw-cr, var(--_ctm-dn-er-me-sw-cr)))
3756
+ );
3757
+ white-space: nowrap;
3758
+
3759
+ .error__message {
3760
+ color: var(--_ctm-mob-dn-er-me-cr, var(--_ctm-tab-dn-er-me-cr, var(--_ctm-dn-er-me-cr)));
3761
+ font-family: var(
3762
+ --_ctm-mob-dn-er-me-ft-fy,
3763
+ var(--_ctm-tab-dn-er-me-ft-fy, var(--_ctm-dn-er-me-ft-fy))
3764
+ );
3765
+ font-size: var(
3766
+ --_ctm-mob-dn-er-me-ft-se,
3767
+ var(--_ctm-tab-dn-er-me-ft-se, var(--_ctm-dn-er-me-ft-se))
3768
+ );
3769
+ font-weight: var(
3770
+ --_ctm-mob-dn-er-me-ft-wt,
3771
+ var(--_ctm-tab-dn-er-me-ft-wt, var(--_ctm-dn-er-me-ft-wt))
3772
+ );
3773
+ font-style: var(
3774
+ --_ctm-mob-dn-er-me-ft-se-ic,
3775
+ var(--_ctm-tab-dn-er-me-ft-se-ic, var(--_ctm-dn-er-me-ft-se-ic))
3776
+ );
3777
+ text-align: var(
3778
+ --_ctm-mob-dn-er-me-tt-an,
3779
+ var(--_ctm-tab-dn-er-me-tt-an, var(--_ctm-dn-er-me-tt-an))
3780
+ );
3781
+ letter-spacing: var(
3782
+ --_ctm-mob-dn-er-me-lr-sg,
3783
+ var(--_ctm-tab-dn-er-me-lr-sg, var(--_ctm-dn-er-me-lr-sg))
3784
+ );
3785
+ line-height: var(
3786
+ --_ctm-mob-dn-er-me-le-ht,
3787
+ var(--_ctm-tab-dn-er-me-le-ht, var(--_ctm-dn-er-me-le-ht))
3788
+ );
3789
+ text-decoration: var(
3790
+ --_ctm-mob-dn-er-me-ue,
3791
+ var(--_ctm-tab-dn-er-me-ue, var(--_ctm-dn-er-me-ue))
3792
+ );
3793
+ padding: prepareMediaVariable(--_ctm-dn-er-me-pg);
3794
+ }
3795
+ }
3796
+
3797
+ .icon {
3798
+ cursor: pointer;
3799
+ svg {
3800
+ width: var(--_ctm-dn-er-me-in-se);
3801
+ height: var(--_ctm-dn-er-me-in-se);
3802
+ path {
3803
+ stroke: var(--_ctm-dn-er-me-in-c1);
3804
+ }
3805
+ }
3806
+ }
3807
+ .add_to_cart_wrapper {
3808
+ .error__message {
3809
+ text-align: center;
3810
+ }
3811
+ }
3812
+ }
3813
+
3814
+ .category_template1 {
3815
+ .bundle_details_heading_wrapper {
3816
+ margin-bottom: 12px;
3817
+ }
3818
+ }