@sc-360-v2/storefront-cms-library 0.4.57 → 0.4.59

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 (149) 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/allocationDetails.scss +3 -0
  5. package/dist/allocations.scss +1603 -1603
  6. package/dist/amount-estimator.scss +1083 -1083
  7. package/dist/animation-control.scss +23 -23
  8. package/dist/badge.scss +388 -388
  9. package/dist/brand-basic-elements.scss +292 -292
  10. package/dist/brand.scss +93 -93
  11. package/dist/breadcrumbs.scss +802 -802
  12. package/dist/bulk-order-pad.scss +677 -677
  13. package/dist/bulk-variant-picker copy.scss +1121 -1121
  14. package/dist/bulk-variant-picker.scss +3294 -3294
  15. package/dist/bundle copy.scss +2805 -2805
  16. package/dist/bundle.scss +2383 -2383
  17. package/dist/bundleDetails copy.scss +1431 -1431
  18. package/dist/button copy.scss +271 -271
  19. package/dist/button.scss +292 -292
  20. package/dist/buy-for-tab-container.scss +90 -90
  21. package/dist/buy-for-tabs-container-item.scss +80 -80
  22. package/dist/buyForHeaders.scss +6718 -6718
  23. package/dist/cart-products-sidebar.scss +211 -211
  24. package/dist/cart-summary.scss +2728 -2728
  25. package/dist/cart-wrapper.scss +127 -127
  26. package/dist/cartGrouping.scss +89 -89
  27. package/dist/category-groups-element.scss +138 -138
  28. package/dist/category.scss +73 -73
  29. package/dist/categoryDetails.scss +61 -61
  30. package/dist/categoryWidget.scss +34 -34
  31. package/dist/checkbox-radio.scss +124 -124
  32. package/dist/code-temp.scss +58 -58
  33. package/dist/colorpicker_v2.scss +52 -52
  34. package/dist/common-element.scss +35 -35
  35. package/dist/confirm-modal.scss +351 -351
  36. package/dist/confirmationModal.scss +139 -139
  37. package/dist/container.scss +114 -114
  38. package/dist/countdown.scss +751 -751
  39. package/dist/coupon.scss +1254 -1254
  40. package/dist/custom-fonts.scss +100 -100
  41. package/dist/customization-tree.scss +160 -160
  42. package/dist/default-dropdown.scss +240 -240
  43. package/dist/editCartItem.scss +111 -111
  44. package/dist/embed-temp.scss +72 -72
  45. package/dist/embroider-preview-element.scss +94 -94
  46. package/dist/embroider-template-1-v2.scss +937 -937
  47. package/dist/embroider-template-1.scss +482 -482
  48. package/dist/embroidery.scss +213 -213
  49. package/dist/employee-bulk-order.scss +4057 -4057
  50. package/dist/emtpy-templates.scss +165 -165
  51. package/dist/faq.scss +564 -564
  52. package/dist/fb-dropdown.scss +125 -125
  53. package/dist/filter-results.scss +323 -323
  54. package/dist/flex-text-editor.scss +271 -271
  55. package/dist/form-preview.scss +290 -290
  56. package/dist/form-zindex-module.scss +24 -24
  57. package/dist/gallery-slider-temp.scss +1234 -1234
  58. package/dist/global-styles.scss +86 -86
  59. package/dist/grid.scss +119 -119
  60. package/dist/hotspot.scss +397 -397
  61. package/dist/icon-library.scss +74 -74
  62. package/dist/image-for-product.scss +21 -21
  63. package/dist/image-temp.scss +168 -168
  64. package/dist/item-stock.scss +87 -87
  65. package/dist/layouter-item.scss +89 -89
  66. package/dist/layouter-pro-item.scss +80 -80
  67. package/dist/layouter-pro.scss +88 -88
  68. package/dist/light-box-v2.scss +105 -105
  69. package/dist/lightbox.scss +78 -78
  70. package/dist/line.scss +166 -166
  71. package/dist/loader.scss +37 -37
  72. package/dist/map.scss +962 -962
  73. package/dist/marchandiserSets.scss +60 -60
  74. package/dist/mega-menu-container.scss +99 -99
  75. package/dist/mega-menu.scss +838 -838
  76. package/dist/menu-item.scss +19 -19
  77. package/dist/menu.scss +162 -162
  78. package/dist/modal.scss +2267 -2267
  79. package/dist/multi-select-dropdown.scss +282 -282
  80. package/dist/my-wishlist.scss +17 -17
  81. package/dist/option-bar.scss +845 -845
  82. package/dist/order-processing.scss +61 -61
  83. package/dist/overflow-module.scss +63 -63
  84. package/dist/past-orders.scss +975 -975
  85. package/dist/payment-methods.scss +289 -289
  86. package/dist/pickup-locations.scss +1167 -1167
  87. package/dist/position-module.scss +95 -95
  88. package/dist/prefix-list.scss +86 -86
  89. package/dist/product-actions copy.scss +2765 -2765
  90. package/dist/product-actions.scss +2286 -2286
  91. package/dist/product-basic-elements.scss +770 -770
  92. package/dist/product-customizations.scss +149 -149
  93. package/dist/product-highlights copy.scss +217 -217
  94. package/dist/product-highlights.scss +311 -311
  95. package/dist/product-image copy.scss +787 -787
  96. package/dist/product-image-allocation.scss +3 -0
  97. package/dist/product-inventory.scss +1378 -1378
  98. package/dist/product-options.scss +1144 -1144
  99. package/dist/product-price.scss +2598 -2598
  100. package/dist/product-promotions.scss +2759 -2759
  101. package/dist/product.scss +97 -97
  102. package/dist/productDetails.scss +70 -70
  103. package/dist/quick-links.scss +552 -552
  104. package/dist/quick-order-pad.scss +237 -237
  105. package/dist/quota-details.scss +263 -263
  106. package/dist/quotes.scss +737 -737
  107. package/dist/repeater copy.scss +635 -635
  108. package/dist/repeater-grid-toggle.scss +58 -58
  109. package/dist/repeater-item.scss +90 -90
  110. package/dist/request-for-quotes.scss +746 -746
  111. package/dist/responsive-behaviour.scss +29 -29
  112. package/dist/rfqs.scss +736 -736
  113. package/dist/scroll.scss +222 -222
  114. package/dist/search-results-heading.scss +279 -279
  115. package/dist/shareCartSideBar.scss +254 -254
  116. package/dist/shipping-estimator.scss +41 -41
  117. package/dist/shipping-payments.scss +2467 -2467
  118. package/dist/simple-list.scss +259 -259
  119. package/dist/skeleton.scss +74 -74
  120. package/dist/social.scss +276 -276
  121. package/dist/sort.scss +89 -89
  122. package/dist/spotlight.scss +1663 -1663
  123. package/dist/stack.scss +129 -129
  124. package/dist/static-text.scss +52 -52
  125. package/dist/stockStatus.scss +64 -64
  126. package/dist/store-locations.scss +1398 -1398
  127. package/dist/sub-category.scss +74 -74
  128. package/dist/submit-quote.scss +275 -275
  129. package/dist/tab-container-item.scss +80 -80
  130. package/dist/tab-container.scss +89 -89
  131. package/dist/tab-v2.scss +583 -583
  132. package/dist/table-common.scss +506 -506
  133. package/dist/table.scss +685 -685
  134. package/dist/tabs.scss +395 -395
  135. package/dist/text-temp-v2.scss +139 -139
  136. package/dist/text-temp.scss +109 -109
  137. package/dist/toaster.scss +350 -350
  138. package/dist/toggle-button.scss +32 -32
  139. package/dist/transform-properties-module.scss +20 -20
  140. package/dist/uom-selector.scss +1169 -1169
  141. package/dist/user-elements copy.scss +1437 -1437
  142. package/dist/variant-picker.scss +2384 -2384
  143. package/dist/video.scss +476 -476
  144. package/dist/volume-pricing copy 2.scss +1468 -1468
  145. package/dist/volume-pricing copy.scss +1077 -1077
  146. package/dist/volume-pricing.scss +1175 -1175
  147. package/dist/widget.scss +148 -148
  148. package/dist/wishlist-overlay.scss +48 -48
  149. package/package.json +1 -1
package/dist/coupon.scss CHANGED
@@ -1,1254 +1,1254 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- $resizerId: "[data-cms-tool='cms-element-resizer']";
6
- $resizeActive: '[data-cms-element-resizer="true"]';
7
-
8
- [data-div-type="element"] {
9
- &[data-element-type="coupon"] {
10
- width: var(
11
- --_sf-el-wh-st-mx,
12
- calc(
13
- 1% *
14
- var(
15
- --_mob-ctm-ele-nw-wh-vl,
16
- var(--_tab-ctm-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
17
- )
18
- )
19
- );
20
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
21
- & > div {
22
- &.wrapper {
23
- width: 100%;
24
- }
25
- }
26
- .coupon_code {
27
- background-color: var(
28
- --_ctm-mob-dn-cn-cr-bd-cr,
29
- var(--_ctm-tab-dn-cn-cr-bd-cr, var(--_ctm-dn-cn-cr-bd-cr))
30
- );
31
- border-color: var(
32
- --_ctm-mob-dn-cn-cr-br-cr,
33
- var(--_ctm-tab-dn-cn-cr-br-cr, var(--_ctm-dn-cn-cr-br-cr))
34
- );
35
- border-style: var(
36
- --_ctm-mob-dn-cn-cr-br-se,
37
- var(--_ctm-tab-dn-cn-cr-br-se, var(--_ctm-dn-cn-cr-br-se))
38
- );
39
- border-width: var(
40
- --_ctm-mob-dn-cn-cr-br-wh,
41
- var(--_ctm-tab-dn-cn-cr-br-wh, var(--_ctm-dn-cn-cr-br-wh))
42
- );
43
- border-radius: var(
44
- --_ctm-mob-dn-cn-cr-br-rs,
45
- var(--_ctm-tab-dn-cn-cr-br-rs, var(--_ctm-dn-cn-cr-br-rs))
46
- );
47
- box-shadow: var(
48
- var(
49
- --_ctm-mob-dn-cn-cr-sw-ae,
50
- var(--_ctm-tab-dn-cn-cr-sw-ae, var(--_ctm-dn-cn-cr-sw-ae, none))
51
- )
52
- var(
53
- --_ctm-mob-dn-cn-cr-sw-br,
54
- var(--_ctm-tab-dn-cn-cr-sw-br, var(--_ctm-dn-cn-cr-sw-br, none))
55
- )
56
- var(
57
- --_ctm-mob-dn-cn-cr-sw-sd,
58
- var(--_ctm-tab-dn-cn-cr-sw-sd, var(--_ctm-dn-cn-cr-sw-sd, none))
59
- )
60
- var(
61
- --_ctm-mob-dn-cn-cr-sw-cr,
62
- var(--_ctm-tab-dn-cn-cr-sw-cr, var(--_ctm-dn-cn-cr-sw-cr, none))
63
- )
64
- );
65
- width: 100%;
66
- // max-width: 400px;
67
- overflow: hidden;
68
- height: auto;
69
- position: sticky;
70
- top: 10px;
71
- // margin-bottom: 24px;
72
- .coupon_code_header {
73
- // font-size: 16px;
74
- font-family: var(
75
- --_ctm-mob-dn-cn-hr-ft-fy,
76
- var(--_ctm-tab-dn-cn-hr-ft-fy, var(--_ctm-dn-cn-hr-ft-fy))
77
- );
78
- color: var(--_ctm-mob-dn-cn-hr-cr, var(--_ctm-tab-dn-cn-hr-cr, var(--_ctm-dn-cn-hr-cr)));
79
- font-weight: var(
80
- --_ctm-mob-dn-cn-hr-ft-wt,
81
- var(--_ctm-tab-dn-cn-hr-ft-wt, var(--_ctm-dn-cn-hr-ft-wt))
82
- );
83
- font-size: var(
84
- --_ctm-mob-dn-cn-hr-ft-se,
85
- var(--_ctm-tab-dn-cn-hr-ft-se, var(--_ctm-dn-cn-hr-ft-se))
86
- );
87
- text-decoration: var(
88
- --_ctm-mob-dn-cn-hr-ue,
89
- var(--_ctm-tab-dn-cn-hr-ue, var(--_ctm-dn-cn-hr-ue))
90
- );
91
- letter-spacing: var(
92
- --_ctm-mob-dn-cn-hr-lr-sg,
93
- var(--_ctm-tab-dn-cn-hr-lr-sg, var(--_ctm-dn-cn-hr-lr-sg))
94
- );
95
- line-height: var(
96
- --_ctm-mob-dn-cn-hr-le-ht,
97
- var(--_ctm-tab-dn-cn-hr-le-ht, var(--_ctm-dn-cn-hr-le-ht))
98
- );
99
- font-style: var(
100
- --_ctm-mob-dn-cn-hr-ft-se-ic,
101
- var(--_ctm-tab-dn-cn-hr-ft-se-ic, var(--_ctm-dn-cn-hr-ft-se-ic))
102
- );
103
- text-align: var(
104
- --_ctm-mob-dn-cn-hr-tt-an,
105
- var(--_ctm-tab-dn-cn-hr-tt-an, var(--_ctm-dn-cn-hr-tt-an))
106
- );
107
- background-color: var(
108
- --_ctm-mob-dn-cn-hr-bd-cr,
109
- var(--_ctm-tab-dn-cn-hr-bd-cr, var(--_ctm-dn-cn-hr-bd-cr))
110
- );
111
- border-color: var(
112
- --_ctm-mob-dn-cn-hr-br-cr,
113
- var(--_ctm-tab-dn-cn-hr-br-cr, var(--_ctm-dn-cn-hr-br-cr))
114
- );
115
- border-style: var(
116
- --_ctm-mob-dn-cn-hr-br-se,
117
- var(--_ctm-tab-dn-cn-hr-br-se, var(--_ctm-dn-cn-hr-br-se))
118
- );
119
- border-width: var(
120
- --_ctm-mob-dn-cn-hr-br-wh,
121
- var(--_ctm-tab-dn-cn-hr-br-wh, var(--_ctm-dn-cn-hr-br-wh))
122
- );
123
- padding: var(--_ctm-mob-dn-cn-hr-pg, var(--_ctm-tab-dn-cn-hr-pg, var(--_ctm-dn-cn-hr-pg)));
124
-
125
- &.divider {
126
- border-bottom: 1px dashed var(--_gray-300);
127
- }
128
- }
129
- .coupon_code_body {
130
- padding: var(
131
- --_ctm-mob-dn-cn-wt-cr-pg,
132
- var(--_ctm-tab-dn-cn-wt-cr-pg, var(--_ctm-dn-cn-wt-cr-pg))
133
- );
134
-
135
- .apply_coupon_code_body {
136
- // padding-top: 16px;
137
- display: flex;
138
- align-items: flex-start;
139
- justify-content: space-between;
140
- gap: var(
141
- --_ctm-mob-dn-cn-wt-cr-im-gp,
142
- var(--_ctm-tab-dn-cn-wt-cr-im-gp, var(--_ctm-dn-cn-wt-cr-im-gp))
143
- );
144
- .apply_coupon_code_flex {
145
- display: flex;
146
- gap: var(
147
- --_ctm-mob-dn-cn-wt-cr-im-gp,
148
- var(--_ctm-tab-dn-cn-wt-cr-im-gp, var(--_ctm-dn-cn-wt-cr-im-gp))
149
- );
150
- .cpn__sale__icon {
151
- margin-top: 4px;
152
- .icon {
153
- svg {
154
- width: var(
155
- --_ctm-mob-dn-cn-wt-in-se,
156
- var(--_ctm-tab-dn-cn-wt-in-se, var(--_ctm-dn-cn-wt-in-se))
157
- );
158
- height: var(
159
- --_ctm-mob-dn-cn-wt-in-se,
160
- var(--_ctm-tab-dn-cn-wt-in-se, var(--_ctm-dn-cn-wt-in-se))
161
- );
162
- path {
163
- stroke: var(
164
- --_ctm-mob-dn-cn-wt-in-c1,
165
- var(--_ctm-tab-dn-cn-wt-in-c1, var(--_ctm-dn-cn-wt-in-c1))
166
- );
167
- }
168
- }
169
- }
170
- }
171
- .apply_coupon_code {
172
- display: flex;
173
- flex-direction: column;
174
- justify-content: center;
175
- gap: 4px;
176
- .cpn_sale_text {
177
- // font-size: 14px;
178
- font-family: var(
179
- --_ctm-mob-dn-cn-wt-te-ft-fy,
180
- var(--_ctm-tab-dn-cn-wt-te-ft-fy, var(--_ctm-dn-cn-wt-te-ft-fy))
181
- );
182
- color: var(
183
- --_ctm-mob-dn-cn-wt-te-cr,
184
- var(--_ctm-tab-dn-cn-wt-te-cr, var(--_ctm-dn-cn-wt-te-cr))
185
- );
186
- font-weight: var(
187
- --_ctm-mob-dn-cn-wt-te-ft-wt,
188
- var(--_ctm-tab-dn-cn-wt-te-ft-wt, var(--_ctm-dn-cn-wt-te-ft-wt))
189
- );
190
- font-size: var(
191
- --_ctm-mob-dn-cn-wt-te-ft-se,
192
- var(--_ctm-tab-dn-cn-wt-te-ft-se, var(--_ctm-dn-cn-wt-te-ft-se))
193
- );
194
- text-decoration: var(
195
- --_ctm-mob-dn-cn-wt-te-ue,
196
- var(--_ctm-tab-dn-cn-wt-te-ue, var(--_ctm-dn-cn-wt-te-ue))
197
- );
198
- letter-spacing: var(
199
- --_ctm-mob-dn-cn-wt-te-lr-sg,
200
- var(--_ctm-tab-dn-cn-wt-te-lr-sg, var(--_ctm-dn-cn-wt-te-lr-sg))
201
- );
202
- line-height: var(
203
- --_ctm-mob-dn-cn-wt-te-le-ht,
204
- var(--_ctm-tab-dn-cn-wt-te-le-ht, var(--_ctm-dn-cn-wt-te-le-ht))
205
- );
206
- font-style: var(
207
- --_ctm-mob-dn-cn-wt-te-ft-se-ic,
208
- var(--_ctm-tab-dn-cn-wt-te-ft-se-ic, var(--_ctm-dn-cn-wt-te-ft-se-ic))
209
- );
210
- text-align: var(
211
- --_ctm-mob-dn-cn-wt-te-tt-an,
212
- var(--_ctm-tab-dn-cn-wt-te-tt-an, var(--_ctm-dn-cn-wt-te-tt-an))
213
- );
214
- // font-size: 16px;
215
- // font-weight: 600;
216
- // color: var(--_gray-900);
217
- // line-height: 20px;
218
- }
219
- .cpn_sale_desc {
220
- font-family: var(
221
- --_ctm-mob-dn-cn-wt-dn-ft-fy,
222
- var(--_ctm-tab-dn-cn-wt-dn-ft-fy, var(--_ctm-dn-cn-wt-dn-ft-fy))
223
- );
224
- color: var(
225
- --_ctm-mob-dn-cn-wt-dn-cr,
226
- var(--_ctm-tab-dn-cn-wt-dn-cr, var(--_ctm-dn-cn-wt-dn-cr))
227
- );
228
- font-weight: var(
229
- --_ctm-mob-dn-cn-wt-dn-ft-wt,
230
- var(--_ctm-tab-dn-cn-wt-dn-ft-wt, var(--_ctm-dn-cn-wt-dn-ft-wt))
231
- );
232
- // font-size: 14px;
233
- font-size: var(
234
- --_ctm-mob-dn-cn-wt-dn-ft-se,
235
- var(--_ctm-tab-dn-cn-wt-dn-ft-se, var(--_ctm-dn-cn-wt-dn-ft-se))
236
- );
237
- text-decoration: var(
238
- --_ctm-mob-dn-cn-wt-dn-ue,
239
- var(--_ctm-tab-dn-cn-wt-dn-ue, var(--_ctm-dn-cn-wt-dn-ue))
240
- );
241
- letter-spacing: var(
242
- --_ctm-mob-dn-cn-wt-dn-lr-sg,
243
- var(--_ctm-tab-dn-cn-wt-dn-lr-sg, var(--_ctm-dn-cn-wt-dn-lr-sg))
244
- );
245
- line-height: var(
246
- --_ctm-mob-dn-cn-wt-dn-le-ht,
247
- var(--_ctm-tab-dn-cn-wt-dn-le-ht, var(--_ctm-dn-cn-wt-dn-le-ht))
248
- );
249
- font-style: var(
250
- --_ctm-mob-dn-cn-wt-dn-ft-se-ic,
251
- var(--_ctm-tab-dn-cn-wt-dn-ft-se-ic, var(--_ctm-dn-cn-wt-dn-ft-se-ic))
252
- );
253
- text-align: var(
254
- --_ctm-mob-dn-cn-wt-dn-tt-an,
255
- var(--_ctm-tab-dn-cn-wt-dn-tt-an, var(--_ctm-dn-cn-wt-dn-tt-an))
256
- );
257
- // font-size: 14px;
258
- // font-weight: 400;
259
- // color: var(--_gray-500);
260
- // line-height: 20px;
261
- .login_link {
262
- font-family: var(
263
- --_ctm-mob-dn-cn-wt-ft-fy-dc,
264
- var(--_ctm-tab-dn-cn-wt-ft-fy-dc, var(--_ctm-dn-cn-wt-ft-fy-dc))
265
- );
266
- color: var(--_thm-cs-tt-ls-as);
267
- font-weight: var(
268
- --_ctm-mob-dn-cn-wt-ft-wt-dc,
269
- var(--_ctm-tab-dn-cn-wt-ft-wt-dc, var(--_ctm-dn-cn-wt-ft-wt-dc))
270
- );
271
- font-size: 14px;
272
- // font-size: var(
273
- // --_ctm-mob-dn-cn-wt-ft-se-dc,
274
- // var(--_ctm-tab-dn-cn-wt-ft-se-dc, var(--_ctm-dn-cn-wt-ft-se-dc))
275
- // );
276
- text-decoration: var(
277
- --_ctm-mob-dn-cn-wt-ue-dc,
278
- var(--_ctm-tab-dn-cn-wt-ue-dc, var(--_ctm-dn-cn-wt-ue-dc))
279
- );
280
- letter-spacing: var(
281
- --_ctm-mob-dn-cn-wt-lr-sg-dc,
282
- var(--_ctm-tab-dn-cn-wt-lr-sg-dc, var(--_ctm-dn-cn-wt-lr-sg-dc))
283
- );
284
- line-height: var(
285
- --_ctm-mob-dn-cn-wt-le-ht-dc,
286
- var(--_ctm-tab-dn-cn-wt-le-ht-dc, var(--_ctm-dn-cn-wt-le-ht-dc))
287
- );
288
- font-style: var(
289
- --_ctm-mob-dn-cn-wt-ft-se-ic-dc,
290
- var(--_ctm-tab-dn-cn-wt-ft-se-ic-dc, var(--_ctm-dn-cn-wt-ft-se-ic-dc))
291
- );
292
- text-align: var(
293
- --_ctm-mob-dn-cn-wt-tt-an-dc,
294
- var(--_ctm-tab-dn-cn-wt-tt-an-dc, var(--_ctm-dn-cn-wt-tt-an-dc))
295
- );
296
- // color: var(--_primary-400);
297
- // font-weight: 700;
298
- }
299
- }
300
- }
301
- }
302
- .apply_coupon_code_btn {
303
- padding: 12px;
304
- white-space: nowrap;
305
- }
306
- .btn__with__text[data-btn-name="applyButton"] {
307
- width: 100%;
308
- &[data-show-shadow="false"] {
309
- --_show-shadow: none;
310
- }
311
- &[data-icon-position="left"] {
312
- --_sf-fd-bn: row;
313
- }
314
- &[data-icon-position="right"] {
315
- --_sf-fd-bn: row-reverse;
316
- }
317
- &[data-icon-position="center"] {
318
- --_sf-fd-bn: row;
319
- }
320
-
321
- &:hover {
322
- --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-bd-cr)};
323
- --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-cr)};
324
- --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-se)};
325
- --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-wh)};
326
- --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-rs)};
327
- --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-at)};
328
- --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-gp)};
329
-
330
- // for shadow
331
- --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-ae)};
332
- --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-br)};
333
- --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-hr)};
334
- --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-as-ay-bn-hr-se-sw-cr)};
335
- // for font
336
-
337
- --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-cr)};
338
- --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-fy)};
339
- --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se)};
340
- --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-wt)};
341
- --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se-ic)};
342
- --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-tt-an)};
343
- --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-lr-sg)};
344
- --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-le-ht)};
345
-
346
- --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
347
- --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
348
- --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-c1)};
349
- --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ue)};
350
-
351
- // for pading and width
352
- --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-pg)};
353
- --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-wh)};
354
- &[data-hover-show-shadow="false"] {
355
- --_hover-show-shadow: none;
356
- }
357
- &[data-hover-show-icon="false"] {
358
- --_hover-show-icon: none;
359
- }
360
- }
361
-
362
- background-color: var(
363
- --_sf-hr-bd-cr,
364
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-bd-cr)
365
- );
366
-
367
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-pg));
368
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-wh));
369
- display: flex;
370
- flex-direction: var(--_sf-fd-bn);
371
- align-items: center;
372
-
373
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-at));
374
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-gp));
375
-
376
- border-radius: var(
377
- --_sf-hr-br-rs,
378
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-rs)
379
- );
380
-
381
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-ae))
382
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-br))
383
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-sd))
384
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-cr));
385
- width: 140px;
386
- display: flex;
387
- &[data-show-border="true"] {
388
- // width: 100%;
389
- border-color: var(
390
- --_sf-hr-br-cr,
391
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-cr)
392
- );
393
-
394
- border-style: var(
395
- --_sf-hr-br-se,
396
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-se)
397
- );
398
-
399
- border-width: var(
400
- --_sf-hr-br-wh,
401
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-wh)
402
- );
403
- }
404
-
405
- .txt {
406
- display: flex;
407
-
408
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-cr));
409
-
410
- font-family:
411
- var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-fy)),
412
- sans-serif;
413
-
414
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se));
415
-
416
- font-weight: var(
417
- --_sf-hr-ft-wt,
418
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-wt)
419
- );
420
-
421
- font-style: var(
422
- --_sf-hr-ft-se-ic,
423
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se-ic)
424
- );
425
-
426
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-tt-an));
427
-
428
- letter-spacing: var(
429
- --_sf-hr-lr-sg,
430
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-lr-sg)
431
- );
432
-
433
- line-height: var(
434
- --_sf-hr-le-ht,
435
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-le-ht)
436
- );
437
-
438
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
439
- }
440
-
441
- .icon {
442
- display: var(--_hover-show-icon, var(--_show-icon, flex));
443
- svg {
444
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));
445
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));
446
-
447
- path {
448
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-c1));
449
- }
450
- }
451
- }
452
- [data-element-style="Text"] {
453
- display: inline-block;
454
- width: 100%;
455
- }
456
-
457
- .icon--hover {
458
- // position: absolute;
459
- // inset: 0;
460
- // opacity: 0;
461
- display: none;
462
- transition: opacity 0.2s ease;
463
- }
464
-
465
- &:hover .icon--hover {
466
- // opacity: 1;
467
- display: flex;
468
- }
469
-
470
- &:hover .icon--default {
471
- // opacity: 0;
472
- display: none;
473
- }
474
- }
475
- }
476
- .coupon_code_apply_section {
477
- display: flex;
478
- flex-direction: column;
479
- gap: 16px;
480
- .coupon_code_fields_wrapper {
481
- display: flex;
482
- align-items: center;
483
- justify-content: space-between;
484
- gap: 12px;
485
- input {
486
- // border: 1px solid #d0d5dd;
487
- // padding: 12px;
488
- // width: 100%;
489
- // border-radius: 4px;
490
- font-family: var(
491
- --_ctm-mob-dn-cn-wt-it-fd-ft-fy,
492
- var(--_ctm-tab-dn-cn-wt-it-fd-ft-fy, var(--_ctm-dn-cn-wt-it-fd-ft-fy))
493
- );
494
- color: var(
495
- --_ctm-mob-dn-cn-wt-it-fd-cr,
496
- var(--_ctm-tab-dn-cn-wt-it-fd-cr, var(--_ctm-dn-cn-wt-it-fd-cr))
497
- );
498
- font-weight: var(
499
- --_ctm-mob-dn-cn-wt-it-fd-ft-wt,
500
- var(--_ctm-tab-dn-cn-wt-it-fd-ft-wt, var(--_ctm-dn-cn-wt-it-fd-ft-wt))
501
- );
502
- font-size: var(
503
- --_ctm-mob-dn-cn-wt-it-fd-ft-se,
504
- var(--_ctm-tab-dn-cn-wt-it-fd-ft-se, var(--_ctm-dn-cn-wt-it-fd-ft-se))
505
- );
506
- text-decoration: var(
507
- --_ctm-mob-dn-cn-wt-it-fd-ue,
508
- var(--_ctm-tab-dn-cn-wt-it-fd-ue, var(--_ctm-dn-cn-wt-it-fd-ue))
509
- );
510
- letter-spacing: var(
511
- --_ctm-mob-dn-cn-wt-it-fd-lr-sg,
512
- var(--_ctm-tab-dn-cn-wt-it-fd-lr-sg, var(--_ctm-dn-cn-wt-it-fd-lr-sg))
513
- );
514
- line-height: var(
515
- --_ctm-mob-dn-cn-wt-it-fd-le-ht,
516
- var(--_ctm-tab-dn-cn-wt-it-fd-le-ht, var(--_ctm-dn-cn-wt-it-fd-le-ht))
517
- );
518
- font-style: var(
519
- --_ctm-mob-dn-cn-wt-it-fd-ft-se-ic,
520
- var(--_ctm-tab-dn-cn-wt-it-fd-ft-se-ic, var(--_ctm-dn-cn-wt-it-fd-ft-se-ic))
521
- );
522
- text-align: var(
523
- --_ctm-mob-dn-cn-wt-it-fd-tt-an,
524
- var(--_ctm-tab-dn-cn-wt-it-fd-tt-an, var(--_ctm-dn-cn-wt-it-fd-tt-an))
525
- );
526
- background-color: var(
527
- --_ctm-mob-dn-cn-wt-it-fd-bd-cr,
528
- var(--_ctm-tab-dn-cn-wt-it-fd-bd-cr, var(--_ctm-dn-cn-wt-it-fd-bd-cr))
529
- );
530
- padding: var(
531
- --_ctm-mob-dn-cn-wt-it-fd-pg,
532
- var(--_ctm-tab-dn-cn-wt-it-fd-pg, var(--_ctm-dn-cn-wt-it-fd-pg))
533
- );
534
- gap: var(
535
- --_ctm-mob-dn-cn-wt-it-fd-im-gp,
536
- var(--_ctm-tab-dn-cn-wt-it-fd-im-gp, var(--_ctm-dn-cn-wt-it-fd-im-gp))
537
- );
538
- border-color: var(
539
- --_ctm-mob-dn-cn-wt-it-fd-br-cr,
540
- var(--_ctm-tab-dn-cn-wt-it-fd-br-cr, var(--_ctm-dn-cn-wt-it-fd-br-cr))
541
- );
542
- border-style: var(
543
- --_ctm-mob-dn-cn-wt-it-fd-br-se,
544
- var(--_ctm-tab-dn-cn-wt-it-fd-br-se, var(--_ctm-dn-cn-wt-it-fd-br-se))
545
- );
546
- border-width: var(
547
- --_ctm-mob-dn-cn-wt-it-fd-br-wh,
548
- var(--_ctm-tab-dn-cn-wt-it-fd-br-wh, var(--_ctm-dn-cn-wt-it-fd-br-wh))
549
- );
550
- border-radius: var(
551
- --_ctm-mob-dn-cn-wt-it-fd-br-rs,
552
- var(--_ctm-tab-dn-cn-wt-it-fd-br-rs, var(--_ctm-dn-cn-wt-it-fd-br-rs))
553
- );
554
- box-shadow: var(
555
- --_ctm-mob-dn-cn-wt-it-fd-sw-ae,
556
- var(--_ctm-tab-dn-cn-wt-it-fd-sw-ae, var(--_ctm-dn-cn-wt-it-fd-sw-ae))
557
- )
558
- var(
559
- --_ctm-mob-dn-cn-wt-it-fd-sw-br,
560
- var(--_ctm-tab-dn-cn-wt-it-fd-sw-br, var(--_ctm-dn-cn-wt-it-fd-sw-br))
561
- )
562
- var(
563
- --_ctm-mob-dn-cn-wt-it-fd-sw-sd,
564
- var(--_ctm-tab-dn-cn-wt-it-fd-sw-sd, var(--_ctm-dn-cn-wt-it-fd-sw-sd))
565
- )
566
- var(
567
- --_ctm-mob-dn-cn-wt-it-fd-sw-cr,
568
- var(--_ctm-tab-dn-cn-wt-it-fd-sw-cr, var(--_ctm-dn-cn-wt-it-fd-sw-cr))
569
- );
570
- transition:
571
- outline border 0.2s ease,
572
- border 0.2s ease;
573
- &:focus {
574
- border: 1px solid var(--_thm-cs-tt-by-tt);
575
- outline: 2px solid color-mix(in srgb, var(--_thm-cs-tt-by-tt) 10%, transparent);
576
- }
577
- }
578
- .btn__with__text[data-btn-name="applyButton"] {
579
- width: 100%;
580
- &[data-show-shadow="false"] {
581
- --_show-shadow: none;
582
- }
583
- &[data-icon-position="left"] {
584
- --_sf-fd-bn: row;
585
- }
586
- &[data-icon-position="right"] {
587
- --_sf-fd-bn: row-reverse;
588
- }
589
- &[data-icon-position="center"] {
590
- --_sf-fd-bn: row;
591
- }
592
-
593
- &:hover {
594
- --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-bd-cr)};
595
- --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-cr)};
596
- --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-se)};
597
- --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-wh)};
598
- --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-rs)};
599
- --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-at)};
600
- --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-gp)};
601
-
602
- // for shadow
603
- --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-ae)};
604
- --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-br)};
605
- --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-hr)};
606
- --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-as-ay-bn-hr-se-sw-cr)};
607
- // for font
608
-
609
- --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-cr)};
610
- --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-fy)};
611
- --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se)};
612
- --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-wt)};
613
- --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se-ic)};
614
- --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-tt-an)};
615
- --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-lr-sg)};
616
- --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-le-ht)};
617
-
618
- --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
619
- --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
620
- --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-c1)};
621
- --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ue)};
622
-
623
- // for pading and width
624
- --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-pg)};
625
- --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-wh)};
626
- &[data-hover-show-shadow="false"] {
627
- --_hover-show-shadow: none;
628
- }
629
- &[data-hover-show-icon="false"] {
630
- --_hover-show-icon: none;
631
- }
632
- }
633
-
634
- background-color: var(
635
- --_sf-hr-bd-cr,
636
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-bd-cr)
637
- );
638
-
639
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-pg));
640
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-wh));
641
- display: flex;
642
- flex-direction: var(--_sf-fd-bn);
643
- align-items: center;
644
-
645
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-at));
646
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-gp));
647
-
648
- border-radius: var(
649
- --_sf-hr-br-rs,
650
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-rs)
651
- );
652
-
653
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-ae))
654
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-br))
655
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-sd))
656
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-cr));
657
- width: 140px;
658
- display: flex;
659
- &[data-show-border="true"] {
660
- // width: 100%;
661
- border-color: var(
662
- --_sf-hr-br-cr,
663
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-cr)
664
- );
665
-
666
- border-style: var(
667
- --_sf-hr-br-se,
668
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-se)
669
- );
670
-
671
- border-width: var(
672
- --_sf-hr-br-wh,
673
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-wh)
674
- );
675
- }
676
-
677
- .txt {
678
- display: flex;
679
-
680
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-cr));
681
-
682
- font-family:
683
- var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-fy)),
684
- sans-serif;
685
-
686
- font-size: var(
687
- --_sf-hr-ft-se,
688
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se)
689
- );
690
-
691
- font-weight: var(
692
- --_sf-hr-ft-wt,
693
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-wt)
694
- );
695
-
696
- font-style: var(
697
- --_sf-hr-ft-se-ic,
698
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se-ic)
699
- );
700
-
701
- text-align: var(
702
- --_sf-hr-tt-an,
703
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-tt-an)
704
- );
705
-
706
- letter-spacing: var(
707
- --_sf-hr-lr-sg,
708
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-lr-sg)
709
- );
710
-
711
- line-height: var(
712
- --_sf-hr-le-ht,
713
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-le-ht)
714
- );
715
-
716
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
717
- }
718
-
719
- .icon {
720
- display: var(--_hover-show-icon, var(--_show-icon, flex));
721
- svg {
722
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));
723
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));
724
-
725
- path {
726
- stroke: var(
727
- --_sf-hr-in-c1,
728
- prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-c1)
729
- );
730
- }
731
- }
732
- }
733
- [data-element-style="Text"] {
734
- display: inline-block;
735
- width: 100%;
736
- }
737
-
738
- .icon--hover {
739
- // position: absolute;
740
- // inset: 0;
741
- // opacity: 0;
742
- display: none;
743
- transition: opacity 0.2s ease;
744
- }
745
-
746
- &:hover .icon--hover {
747
- // opacity: 1;
748
- display: flex;
749
- }
750
-
751
- &:hover .icon--default {
752
- // opacity: 0;
753
- display: none;
754
- }
755
- }
756
- .coupon-search-btn {
757
- white-space: nowrap;
758
- padding: prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-pg);
759
- &:disabled {
760
- cursor: not-allowed;
761
- opacity: 0.5;
762
- }
763
- }
764
- }
765
- .couponCode_divider {
766
- border: 1px dashed #d0d5dd;
767
- }
768
- .coupon-list {
769
- display: flex;
770
- flex-direction: column;
771
- gap: 24px;
772
- .coupon-item {
773
- display: flex;
774
- flex-direction: row;
775
- gap: 12px;
776
- justify-content: space-between;
777
- input {
778
- width: 18px;
779
- display: flex;
780
- flex-direction: column;
781
- position: relative;
782
- top: -9px;
783
- }
784
- input[type="checkbox"] {
785
- accent-color: rgb(36 61 198);
786
- }
787
- .coupon-info {
788
- display: flex;
789
- flex-direction: column;
790
- gap: 6px;
791
- .coupon-title {
792
- // font-size: 16px;
793
- // font-weight: 700;
794
- // line-height: 24px;
795
- // color: #101828;
796
- font-family: var(
797
- --_ctm-mob-dn-cn-wt-cn-tt-ft-fy,
798
- var(--_ctm-tab-dn-cn-wt-cn-tt-ft-fy, var(--_ctm-dn-cn-wt-cn-tt-ft-fy))
799
- );
800
- color: var(
801
- --_ctm-mob-dn-cn-wt-cn-tt-cr,
802
- var(--_ctm-tab-dn-cn-wt-cn-tt-cr, var(--_ctm-dn-cn-wt-cn-tt-cr))
803
- );
804
- font-weight: var(
805
- --_ctm-mob-dn-cn-wt-cn-tt-ft-wt,
806
- var(--_ctm-tab-dn-cn-wt-cn-tt-ft-wt, var(--_ctm-dn-cn-wt-cn-tt-ft-wt))
807
- );
808
- font-size: var(
809
- --_ctm-mob-dn-cn-wt-cn-tt-ft-se,
810
- var(--_ctm-tab-dn-cn-wt-cn-tt-ft-se, var(--_ctm-dn-cn-wt-cn-tt-ft-se))
811
- );
812
- text-decoration: var(
813
- --_ctm-mob-dn-cn-wt-cn-tt-ue,
814
- var(--_ctm-tab-dn-cn-wt-cn-tt-ue, var(--_ctm-dn-cn-wt-cn-tt-ue))
815
- );
816
- letter-spacing: var(
817
- --_ctm-mob-dn-cn-wt-cn-tt-lr-sg,
818
- var(--_ctm-tab-dn-cn-wt-cn-tt-lr-sg, var(--_ctm-dn-cn-wt-cn-tt-lr-sg))
819
- );
820
- line-height: var(
821
- --_ctm-mob-dn-cn-wt-cn-tt-le-ht,
822
- var(--_ctm-tab-dn-cn-wt-cn-tt-le-ht, var(--_ctm-dn-cn-wt-cn-tt-le-ht))
823
- );
824
- font-style: var(
825
- --_ctm-mob-dn-cn-wt-cn-tt-ft-se-ic,
826
- var(--_ctm-tab-dn-cn-wt-cn-tt-ft-se-ic, var(--_ctm-dn-cn-wt-cn-tt-ft-se-ic))
827
- );
828
- text-align: var(
829
- --_ctm-mob-dn-cn-wt-cn-tt-tt-an,
830
- var(--_ctm-tab-dn-cn-wt-cn-tt-tt-an, var(--_ctm-dn-cn-wt-cn-tt-tt-an))
831
- );
832
- }
833
- .coupon-currency {
834
- display: flex;
835
- align-items: center;
836
- gap: 8px;
837
- .coupon-desc {
838
- // font-size: 14px;
839
- // font-weight: 400;
840
- // line-height: 20px;
841
- // color: #667085;
842
- font-family: var(
843
- --_ctm-mob-dn-cn-wt-sd-te-ft-fy,
844
- var(--_ctm-tab-dn-cn-wt-sd-te-ft-fy, var(--_ctm-dn-cn-wt-sd-te-ft-fy))
845
- );
846
- color: var(
847
- --_ctm-mob-dn-cn-wt-sd-te-cr,
848
- var(--_ctm-tab-dn-cn-wt-sd-te-cr, var(--_ctm-dn-cn-wt-sd-te-cr))
849
- );
850
- font-weight: var(
851
- --_ctm-mob-dn-cn-wt-sd-te-ft-wt,
852
- var(--_ctm-tab-dn-cn-wt-sd-te-ft-wt, var(--_ctm-dn-cn-wt-sd-te-ft-wt))
853
- );
854
- font-size: var(
855
- --_ctm-mob-dn-cn-wt-sd-te-ft-se,
856
- var(--_ctm-tab-dn-cn-wt-sd-te-ft-se, var(--_ctm-dn-cn-wt-sd-te-ft-se))
857
- );
858
- text-decoration: var(
859
- --_ctm-mob-dn-cn-wt-sd-te-ue,
860
- var(--_ctm-tab-dn-cn-wt-sd-te-ue, var(--_ctm-dn-cn-wt-sd-te-ue))
861
- );
862
- letter-spacing: var(
863
- --_ctm-mob-dn-cn-wt-sd-te-lr-sg,
864
- var(--_ctm-tab-dn-cn-wt-sd-te-lr-sg, var(--_ctm-dn-cn-wt-sd-te-lr-sg))
865
- );
866
- line-height: var(
867
- --_ctm-mob-dn-cn-wt-sd-te-le-ht,
868
- var(--_ctm-tab-dn-cn-wt-sd-te-le-ht, var(--_ctm-dn-cn-wt-sd-te-le-ht))
869
- );
870
- font-style: var(
871
- --_ctm-mob-dn-cn-wt-sd-te-ft-se-ic,
872
- var(--_ctm-tab-dn-cn-wt-sd-te-ft-se-ic, var(--_ctm-dn-cn-wt-sd-te-ft-se-ic))
873
- );
874
- text-align: var(
875
- --_ctm-mob-dn-cn-wt-sd-te-tt-an,
876
- var(--_ctm-tab-dn-cn-wt-sd-te-tt-an, var(--_ctm-dn-cn-wt-sd-te-tt-an))
877
- );
878
- }
879
- .currency_span {
880
- // font-size: 14px;
881
- // font-weight: 400;
882
- // line-height: 20px;
883
- // color: #667085;
884
- font-family: var(
885
- --_ctm-mob-dn-cn-wt-pe-ft-fy,
886
- var(--_ctm-tab-dn-cn-wt-pe-ft-fy, var(--_ctm-dn-cn-wt-pe-ft-fy))
887
- );
888
- color: var(
889
- --_ctm-mob-dn-cn-wt-pe-cr,
890
- var(--_ctm-tab-dn-cn-wt-pe-cr, var(--_ctm-dn-cn-wt-pe-cr))
891
- );
892
- font-weight: var(
893
- --_ctm-mob-dn-cn-wt-pe-ft-wt,
894
- var(--_ctm-tab-dn-cn-wt-pe-ft-wt, var(--_ctm-dn-cn-wt-pe-ft-wt))
895
- );
896
- font-size: var(
897
- --_ctm-mob-dn-cn-wt-pe-ft-se,
898
- var(--_ctm-tab-dn-cn-wt-pe-ft-se, var(--_ctm-dn-cn-wt-pe-ft-se))
899
- );
900
- text-decoration: var(
901
- --_ctm-mob-dn-cn-wt-pe-ue,
902
- var(--_ctm-tab-dn-cn-wt-pe-ue, var(--_ctm-dn-cn-wt-pe-ue))
903
- );
904
- letter-spacing: var(
905
- --_ctm-mob-dn-cn-wt-pe-lr-sg,
906
- var(--_ctm-tab-dn-cn-wt-pe-lr-sg, var(--_ctm-dn-cn-wt-pe-lr-sg))
907
- );
908
- line-height: var(
909
- --_ctm-mob-dn-cn-wt-pe-le-ht,
910
- var(--_ctm-tab-dn-cn-wt-pe-le-ht, var(--_ctm-dn-cn-wt-pe-le-ht))
911
- );
912
- font-style: var(
913
- --_ctm-mob-dn-cn-wt-pe-ft-se-ic,
914
- var(--_ctm-tab-dn-cn-wt-pe-ft-se-ic, var(--_ctm-dn-cn-wt-pe-ft-se-ic))
915
- );
916
- text-align: var(
917
- --_ctm-mob-dn-cn-wt-pe-tt-an,
918
- var(--_ctm-tab-dn-cn-wt-pe-tt-an, var(--_ctm-dn-cn-wt-pe-tt-an))
919
- );
920
- }
921
- }
922
- }
923
- .btn__with__text[data-btn-name="removeButton"] {
924
- // width: 100%;
925
-
926
- &[data-show-shadow="false"] {
927
- --_show-shadow: none;
928
- }
929
- &[data-icon-position="left"] {
930
- --_sf-fd-bn: row;
931
- }
932
- &[data-icon-position="right"] {
933
- --_sf-fd-bn: row-reverse;
934
- }
935
- &[data-icon-position="center"] {
936
- --_sf-fd-bn: row;
937
- }
938
-
939
- &:hover {
940
- --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-bd-cr)};
941
- --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-cr)};
942
- --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-se)};
943
- --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-wh)};
944
- --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-rs)};
945
- --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-at)};
946
- --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-gp)};
947
-
948
- // for shadow
949
- --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-sw-ae)};
950
- --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-sw-br)};
951
- --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-sw-hr)};
952
- --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-as-re-bn-hr-se-sw-cr)};
953
- // for font
954
-
955
- --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-cr)};
956
- --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-fy)};
957
- --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-se)};
958
- --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-wt)};
959
- --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-se-ic)};
960
- --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-tt-an)};
961
- --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-lr-sg)};
962
- --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-le-ht)};
963
-
964
- --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-in-se)};
965
- --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-in-se)};
966
- --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-in-c1)};
967
- --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ue)};
968
-
969
- // for pading and width
970
- --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-pg)};
971
- --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-wh)};
972
- &[data-hover-show-shadow="false"] {
973
- --_hover-show-shadow: none;
974
- }
975
- &[data-hover-show-icon="false"] {
976
- --_hover-show-icon: none;
977
- }
978
- }
979
-
980
- background-color: var(
981
- --_sf-hr-bd-cr,
982
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-bd-cr)
983
- );
984
-
985
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-pg));
986
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-wh));
987
- display: flex;
988
- flex-direction: var(--_sf-fd-bn);
989
- align-items: center;
990
-
991
- justify-content: var(
992
- --_sf-hr-at,
993
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-at)
994
- );
995
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-gp));
996
-
997
- border-radius: var(
998
- --_sf-hr-br-rs,
999
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-rs)
1000
- );
1001
-
1002
- box-shadow: var(
1003
- --_sf-hr-sw-ae,
1004
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-ae)
1005
- )
1006
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-br))
1007
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-sd))
1008
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-cr));
1009
- width: 140px;
1010
- display: flex;
1011
- height: 48px;
1012
- &[data-show-border="true"] {
1013
- // width: 100%;
1014
- border-color: var(
1015
- --_sf-hr-br-cr,
1016
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-cr)
1017
- );
1018
-
1019
- border-style: var(
1020
- --_sf-hr-br-se,
1021
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-se)
1022
- );
1023
-
1024
- border-width: var(
1025
- --_sf-hr-br-wh,
1026
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-wh)
1027
- );
1028
- }
1029
-
1030
- .txt {
1031
- display: flex;
1032
-
1033
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-cr));
1034
-
1035
- font-family:
1036
- var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-fy)),
1037
- sans-serif;
1038
-
1039
- font-size: var(
1040
- --_sf-hr-ft-se,
1041
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-se)
1042
- );
1043
-
1044
- font-weight: var(
1045
- --_sf-hr-ft-wt,
1046
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-wt)
1047
- );
1048
-
1049
- font-style: var(
1050
- --_sf-hr-ft-se-ic,
1051
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-se-ic)
1052
- );
1053
-
1054
- text-align: var(
1055
- --_sf-hr-tt-an,
1056
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-tt-an)
1057
- );
1058
-
1059
- letter-spacing: var(
1060
- --_sf-hr-lr-sg,
1061
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-lr-sg)
1062
- );
1063
-
1064
- line-height: var(
1065
- --_sf-hr-le-ht,
1066
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-le-ht)
1067
- );
1068
-
1069
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1070
- }
1071
-
1072
- .icon {
1073
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1074
- svg {
1075
- width: var(
1076
- --_sf-hr-in-se,
1077
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-in-se)
1078
- );
1079
- height: var(
1080
- --_sf-hr-in-se,
1081
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-in-se)
1082
- );
1083
-
1084
- path {
1085
- stroke: var(
1086
- --_sf-hr-in-c1,
1087
- prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-in-c1)
1088
- );
1089
- }
1090
- }
1091
- }
1092
- [data-element-style="Text"] {
1093
- display: inline-block;
1094
- width: 100%;
1095
- }
1096
-
1097
- .icon--hover {
1098
- // position: absolute;
1099
- // inset: 0;
1100
- // opacity: 0;
1101
- display: none;
1102
- transition: opacity 0.2s ease;
1103
- }
1104
-
1105
- &:hover .icon--hover {
1106
- // opacity: 1;
1107
- display: flex;
1108
- }
1109
-
1110
- &:hover .icon--default {
1111
- // opacity: 0;
1112
- display: none;
1113
- }
1114
- }
1115
- .remove-btn {
1116
- padding: prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-pg);
1117
- }
1118
- }
1119
- }
1120
- .coupon-footer-section {
1121
- display: flex;
1122
- justify-content: space-between;
1123
- .coupon-savings {
1124
- .title {
1125
- font-size: 14px;
1126
- font-weight: 400;
1127
- line-height: 20px;
1128
- color: #344054;
1129
- }
1130
- .price {
1131
- font-size: 16px;
1132
- font-weight: 700;
1133
- line-height: 24px;
1134
- color: #101828;
1135
- }
1136
- }
1137
- .apply-coupon-primary-btn {
1138
- width: 158px;
1139
- height: 48px;
1140
- white-space: nowrap;
1141
- }
1142
- }
1143
- }
1144
- }
1145
- }
1146
- }
1147
- }
1148
-
1149
- // .coupon_code {
1150
- // border: 1px solid var(--_gray-300);
1151
- // border-radius: 4px;
1152
- // .coupon_code_header {
1153
- // background-color: var(--_gray-100);
1154
- // padding: 12px 12px 14px 12px;
1155
- // border-bottom: 0.5px solid var(--_gray-300);
1156
- // h3 {
1157
- // font-size: 16px;
1158
- // color: var(--_gray-900);
1159
- // }
1160
- // }
1161
- // .coupon_code_body {
1162
- // display: flex;
1163
- // flex-direction: column;
1164
- // gap: 16px;
1165
- // padding: 16px;
1166
-
1167
- // .coupon_code_apply_section {
1168
- // .coupon_code_fields_wrapper {
1169
- // display: flex;
1170
- // gap: 12px;
1171
- // &.divider {
1172
- // padding-bottom: 16px;
1173
- // border-bottom: 1px dashed var(--_gray-300);
1174
- // }
1175
- // .coupon-search-input {
1176
- // padding: 10px 16px;
1177
- // border: 1px solid var(--_gray-300);
1178
- // border-radius: 4px;
1179
- // height: 40px;
1180
- // &:focus {
1181
- // outline: 2px solid var(--_gray-100);
1182
- // }
1183
- // }
1184
- // .coupon-search-btn {
1185
- // padding: 10px 16px 12px 16px;
1186
- // white-space: nowrap;
1187
- // height: 40px;
1188
- // }
1189
- // }
1190
- // .coupon-list {
1191
- // .coupon-item {
1192
- // .coupon-info {
1193
- // .coupon-title {
1194
- // font-size: 16px;
1195
- // font-weight: 700;
1196
- // color: var(--_gray-900);
1197
- // }
1198
- // .coupon-desc {
1199
- // font-size: 14px;
1200
- // font-weight: 400;
1201
- // color: var(--_gray-600);
1202
- // }
1203
- // .remove-btn {
1204
- // padding: 12px;
1205
- // color: var(--_gray-900);
1206
- // }
1207
- // }
1208
- // }
1209
- // }
1210
- // }
1211
- // .apply_coupon_code_body {
1212
- // display: flex;
1213
- // align-items: center;
1214
- // justify-content: space-between;
1215
- // gap: 12px;
1216
- // &:not(:last-child) {
1217
- // margin-bottom: 12px;
1218
- // }
1219
- // .apply_coupon_code_flex {
1220
- // display: flex;
1221
- // gap: 12px;
1222
- // .cpn__sale__icon {
1223
- // margin-top: 4px;
1224
- // }
1225
- // .apply_coupon_code {
1226
- // display: flex;
1227
- // flex-direction: column;
1228
- // .cpn_sale_text {
1229
- // font-size: 14px;
1230
- // font-weight: 400;
1231
- // color: var(--_gray-900);
1232
- // }
1233
- // }
1234
- // }
1235
- // .cpn_sale_desc {
1236
- // font-size: 14px;
1237
- // font-weight: 400;
1238
- // color: var(--_gray-600);
1239
- // }
1240
- // .apply_coupon_code_btn {
1241
- // padding: 8px 16px;
1242
- // }
1243
- // .remove_coupon_code_btn {
1244
- // padding: 8px 16px;
1245
- // border: 1px solid var(--_gray-300);
1246
- // border-radius: 4px;
1247
- // color: var(--_gray-900);
1248
- // &:hover {
1249
- // background-color: var(--_gray-100);
1250
- // }
1251
- // }
1252
- // }
1253
- // }
1254
- // }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
6
+ $resizeActive: '[data-cms-element-resizer="true"]';
7
+
8
+ [data-div-type="element"] {
9
+ &[data-element-type="coupon"] {
10
+ width: var(
11
+ --_sf-el-wh-st-mx,
12
+ calc(
13
+ 1% *
14
+ var(
15
+ --_mob-ctm-ele-nw-wh-vl,
16
+ var(--_tab-ctm-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
17
+ )
18
+ )
19
+ );
20
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
21
+ & > div {
22
+ &.wrapper {
23
+ width: 100%;
24
+ }
25
+ }
26
+ .coupon_code {
27
+ background-color: var(
28
+ --_ctm-mob-dn-cn-cr-bd-cr,
29
+ var(--_ctm-tab-dn-cn-cr-bd-cr, var(--_ctm-dn-cn-cr-bd-cr))
30
+ );
31
+ border-color: var(
32
+ --_ctm-mob-dn-cn-cr-br-cr,
33
+ var(--_ctm-tab-dn-cn-cr-br-cr, var(--_ctm-dn-cn-cr-br-cr))
34
+ );
35
+ border-style: var(
36
+ --_ctm-mob-dn-cn-cr-br-se,
37
+ var(--_ctm-tab-dn-cn-cr-br-se, var(--_ctm-dn-cn-cr-br-se))
38
+ );
39
+ border-width: var(
40
+ --_ctm-mob-dn-cn-cr-br-wh,
41
+ var(--_ctm-tab-dn-cn-cr-br-wh, var(--_ctm-dn-cn-cr-br-wh))
42
+ );
43
+ border-radius: var(
44
+ --_ctm-mob-dn-cn-cr-br-rs,
45
+ var(--_ctm-tab-dn-cn-cr-br-rs, var(--_ctm-dn-cn-cr-br-rs))
46
+ );
47
+ box-shadow: var(
48
+ var(
49
+ --_ctm-mob-dn-cn-cr-sw-ae,
50
+ var(--_ctm-tab-dn-cn-cr-sw-ae, var(--_ctm-dn-cn-cr-sw-ae, none))
51
+ )
52
+ var(
53
+ --_ctm-mob-dn-cn-cr-sw-br,
54
+ var(--_ctm-tab-dn-cn-cr-sw-br, var(--_ctm-dn-cn-cr-sw-br, none))
55
+ )
56
+ var(
57
+ --_ctm-mob-dn-cn-cr-sw-sd,
58
+ var(--_ctm-tab-dn-cn-cr-sw-sd, var(--_ctm-dn-cn-cr-sw-sd, none))
59
+ )
60
+ var(
61
+ --_ctm-mob-dn-cn-cr-sw-cr,
62
+ var(--_ctm-tab-dn-cn-cr-sw-cr, var(--_ctm-dn-cn-cr-sw-cr, none))
63
+ )
64
+ );
65
+ width: 100%;
66
+ // max-width: 400px;
67
+ overflow: hidden;
68
+ height: auto;
69
+ position: sticky;
70
+ top: 10px;
71
+ // margin-bottom: 24px;
72
+ .coupon_code_header {
73
+ // font-size: 16px;
74
+ font-family: var(
75
+ --_ctm-mob-dn-cn-hr-ft-fy,
76
+ var(--_ctm-tab-dn-cn-hr-ft-fy, var(--_ctm-dn-cn-hr-ft-fy))
77
+ );
78
+ color: var(--_ctm-mob-dn-cn-hr-cr, var(--_ctm-tab-dn-cn-hr-cr, var(--_ctm-dn-cn-hr-cr)));
79
+ font-weight: var(
80
+ --_ctm-mob-dn-cn-hr-ft-wt,
81
+ var(--_ctm-tab-dn-cn-hr-ft-wt, var(--_ctm-dn-cn-hr-ft-wt))
82
+ );
83
+ font-size: var(
84
+ --_ctm-mob-dn-cn-hr-ft-se,
85
+ var(--_ctm-tab-dn-cn-hr-ft-se, var(--_ctm-dn-cn-hr-ft-se))
86
+ );
87
+ text-decoration: var(
88
+ --_ctm-mob-dn-cn-hr-ue,
89
+ var(--_ctm-tab-dn-cn-hr-ue, var(--_ctm-dn-cn-hr-ue))
90
+ );
91
+ letter-spacing: var(
92
+ --_ctm-mob-dn-cn-hr-lr-sg,
93
+ var(--_ctm-tab-dn-cn-hr-lr-sg, var(--_ctm-dn-cn-hr-lr-sg))
94
+ );
95
+ line-height: var(
96
+ --_ctm-mob-dn-cn-hr-le-ht,
97
+ var(--_ctm-tab-dn-cn-hr-le-ht, var(--_ctm-dn-cn-hr-le-ht))
98
+ );
99
+ font-style: var(
100
+ --_ctm-mob-dn-cn-hr-ft-se-ic,
101
+ var(--_ctm-tab-dn-cn-hr-ft-se-ic, var(--_ctm-dn-cn-hr-ft-se-ic))
102
+ );
103
+ text-align: var(
104
+ --_ctm-mob-dn-cn-hr-tt-an,
105
+ var(--_ctm-tab-dn-cn-hr-tt-an, var(--_ctm-dn-cn-hr-tt-an))
106
+ );
107
+ background-color: var(
108
+ --_ctm-mob-dn-cn-hr-bd-cr,
109
+ var(--_ctm-tab-dn-cn-hr-bd-cr, var(--_ctm-dn-cn-hr-bd-cr))
110
+ );
111
+ border-color: var(
112
+ --_ctm-mob-dn-cn-hr-br-cr,
113
+ var(--_ctm-tab-dn-cn-hr-br-cr, var(--_ctm-dn-cn-hr-br-cr))
114
+ );
115
+ border-style: var(
116
+ --_ctm-mob-dn-cn-hr-br-se,
117
+ var(--_ctm-tab-dn-cn-hr-br-se, var(--_ctm-dn-cn-hr-br-se))
118
+ );
119
+ border-width: var(
120
+ --_ctm-mob-dn-cn-hr-br-wh,
121
+ var(--_ctm-tab-dn-cn-hr-br-wh, var(--_ctm-dn-cn-hr-br-wh))
122
+ );
123
+ padding: var(--_ctm-mob-dn-cn-hr-pg, var(--_ctm-tab-dn-cn-hr-pg, var(--_ctm-dn-cn-hr-pg)));
124
+
125
+ &.divider {
126
+ border-bottom: 1px dashed var(--_gray-300);
127
+ }
128
+ }
129
+ .coupon_code_body {
130
+ padding: var(
131
+ --_ctm-mob-dn-cn-wt-cr-pg,
132
+ var(--_ctm-tab-dn-cn-wt-cr-pg, var(--_ctm-dn-cn-wt-cr-pg))
133
+ );
134
+
135
+ .apply_coupon_code_body {
136
+ // padding-top: 16px;
137
+ display: flex;
138
+ align-items: flex-start;
139
+ justify-content: space-between;
140
+ gap: var(
141
+ --_ctm-mob-dn-cn-wt-cr-im-gp,
142
+ var(--_ctm-tab-dn-cn-wt-cr-im-gp, var(--_ctm-dn-cn-wt-cr-im-gp))
143
+ );
144
+ .apply_coupon_code_flex {
145
+ display: flex;
146
+ gap: var(
147
+ --_ctm-mob-dn-cn-wt-cr-im-gp,
148
+ var(--_ctm-tab-dn-cn-wt-cr-im-gp, var(--_ctm-dn-cn-wt-cr-im-gp))
149
+ );
150
+ .cpn__sale__icon {
151
+ margin-top: 4px;
152
+ .icon {
153
+ svg {
154
+ width: var(
155
+ --_ctm-mob-dn-cn-wt-in-se,
156
+ var(--_ctm-tab-dn-cn-wt-in-se, var(--_ctm-dn-cn-wt-in-se))
157
+ );
158
+ height: var(
159
+ --_ctm-mob-dn-cn-wt-in-se,
160
+ var(--_ctm-tab-dn-cn-wt-in-se, var(--_ctm-dn-cn-wt-in-se))
161
+ );
162
+ path {
163
+ stroke: var(
164
+ --_ctm-mob-dn-cn-wt-in-c1,
165
+ var(--_ctm-tab-dn-cn-wt-in-c1, var(--_ctm-dn-cn-wt-in-c1))
166
+ );
167
+ }
168
+ }
169
+ }
170
+ }
171
+ .apply_coupon_code {
172
+ display: flex;
173
+ flex-direction: column;
174
+ justify-content: center;
175
+ gap: 4px;
176
+ .cpn_sale_text {
177
+ // font-size: 14px;
178
+ font-family: var(
179
+ --_ctm-mob-dn-cn-wt-te-ft-fy,
180
+ var(--_ctm-tab-dn-cn-wt-te-ft-fy, var(--_ctm-dn-cn-wt-te-ft-fy))
181
+ );
182
+ color: var(
183
+ --_ctm-mob-dn-cn-wt-te-cr,
184
+ var(--_ctm-tab-dn-cn-wt-te-cr, var(--_ctm-dn-cn-wt-te-cr))
185
+ );
186
+ font-weight: var(
187
+ --_ctm-mob-dn-cn-wt-te-ft-wt,
188
+ var(--_ctm-tab-dn-cn-wt-te-ft-wt, var(--_ctm-dn-cn-wt-te-ft-wt))
189
+ );
190
+ font-size: var(
191
+ --_ctm-mob-dn-cn-wt-te-ft-se,
192
+ var(--_ctm-tab-dn-cn-wt-te-ft-se, var(--_ctm-dn-cn-wt-te-ft-se))
193
+ );
194
+ text-decoration: var(
195
+ --_ctm-mob-dn-cn-wt-te-ue,
196
+ var(--_ctm-tab-dn-cn-wt-te-ue, var(--_ctm-dn-cn-wt-te-ue))
197
+ );
198
+ letter-spacing: var(
199
+ --_ctm-mob-dn-cn-wt-te-lr-sg,
200
+ var(--_ctm-tab-dn-cn-wt-te-lr-sg, var(--_ctm-dn-cn-wt-te-lr-sg))
201
+ );
202
+ line-height: var(
203
+ --_ctm-mob-dn-cn-wt-te-le-ht,
204
+ var(--_ctm-tab-dn-cn-wt-te-le-ht, var(--_ctm-dn-cn-wt-te-le-ht))
205
+ );
206
+ font-style: var(
207
+ --_ctm-mob-dn-cn-wt-te-ft-se-ic,
208
+ var(--_ctm-tab-dn-cn-wt-te-ft-se-ic, var(--_ctm-dn-cn-wt-te-ft-se-ic))
209
+ );
210
+ text-align: var(
211
+ --_ctm-mob-dn-cn-wt-te-tt-an,
212
+ var(--_ctm-tab-dn-cn-wt-te-tt-an, var(--_ctm-dn-cn-wt-te-tt-an))
213
+ );
214
+ // font-size: 16px;
215
+ // font-weight: 600;
216
+ // color: var(--_gray-900);
217
+ // line-height: 20px;
218
+ }
219
+ .cpn_sale_desc {
220
+ font-family: var(
221
+ --_ctm-mob-dn-cn-wt-dn-ft-fy,
222
+ var(--_ctm-tab-dn-cn-wt-dn-ft-fy, var(--_ctm-dn-cn-wt-dn-ft-fy))
223
+ );
224
+ color: var(
225
+ --_ctm-mob-dn-cn-wt-dn-cr,
226
+ var(--_ctm-tab-dn-cn-wt-dn-cr, var(--_ctm-dn-cn-wt-dn-cr))
227
+ );
228
+ font-weight: var(
229
+ --_ctm-mob-dn-cn-wt-dn-ft-wt,
230
+ var(--_ctm-tab-dn-cn-wt-dn-ft-wt, var(--_ctm-dn-cn-wt-dn-ft-wt))
231
+ );
232
+ // font-size: 14px;
233
+ font-size: var(
234
+ --_ctm-mob-dn-cn-wt-dn-ft-se,
235
+ var(--_ctm-tab-dn-cn-wt-dn-ft-se, var(--_ctm-dn-cn-wt-dn-ft-se))
236
+ );
237
+ text-decoration: var(
238
+ --_ctm-mob-dn-cn-wt-dn-ue,
239
+ var(--_ctm-tab-dn-cn-wt-dn-ue, var(--_ctm-dn-cn-wt-dn-ue))
240
+ );
241
+ letter-spacing: var(
242
+ --_ctm-mob-dn-cn-wt-dn-lr-sg,
243
+ var(--_ctm-tab-dn-cn-wt-dn-lr-sg, var(--_ctm-dn-cn-wt-dn-lr-sg))
244
+ );
245
+ line-height: var(
246
+ --_ctm-mob-dn-cn-wt-dn-le-ht,
247
+ var(--_ctm-tab-dn-cn-wt-dn-le-ht, var(--_ctm-dn-cn-wt-dn-le-ht))
248
+ );
249
+ font-style: var(
250
+ --_ctm-mob-dn-cn-wt-dn-ft-se-ic,
251
+ var(--_ctm-tab-dn-cn-wt-dn-ft-se-ic, var(--_ctm-dn-cn-wt-dn-ft-se-ic))
252
+ );
253
+ text-align: var(
254
+ --_ctm-mob-dn-cn-wt-dn-tt-an,
255
+ var(--_ctm-tab-dn-cn-wt-dn-tt-an, var(--_ctm-dn-cn-wt-dn-tt-an))
256
+ );
257
+ // font-size: 14px;
258
+ // font-weight: 400;
259
+ // color: var(--_gray-500);
260
+ // line-height: 20px;
261
+ .login_link {
262
+ font-family: var(
263
+ --_ctm-mob-dn-cn-wt-ft-fy-dc,
264
+ var(--_ctm-tab-dn-cn-wt-ft-fy-dc, var(--_ctm-dn-cn-wt-ft-fy-dc))
265
+ );
266
+ color: var(--_thm-cs-tt-ls-as);
267
+ font-weight: var(
268
+ --_ctm-mob-dn-cn-wt-ft-wt-dc,
269
+ var(--_ctm-tab-dn-cn-wt-ft-wt-dc, var(--_ctm-dn-cn-wt-ft-wt-dc))
270
+ );
271
+ font-size: 14px;
272
+ // font-size: var(
273
+ // --_ctm-mob-dn-cn-wt-ft-se-dc,
274
+ // var(--_ctm-tab-dn-cn-wt-ft-se-dc, var(--_ctm-dn-cn-wt-ft-se-dc))
275
+ // );
276
+ text-decoration: var(
277
+ --_ctm-mob-dn-cn-wt-ue-dc,
278
+ var(--_ctm-tab-dn-cn-wt-ue-dc, var(--_ctm-dn-cn-wt-ue-dc))
279
+ );
280
+ letter-spacing: var(
281
+ --_ctm-mob-dn-cn-wt-lr-sg-dc,
282
+ var(--_ctm-tab-dn-cn-wt-lr-sg-dc, var(--_ctm-dn-cn-wt-lr-sg-dc))
283
+ );
284
+ line-height: var(
285
+ --_ctm-mob-dn-cn-wt-le-ht-dc,
286
+ var(--_ctm-tab-dn-cn-wt-le-ht-dc, var(--_ctm-dn-cn-wt-le-ht-dc))
287
+ );
288
+ font-style: var(
289
+ --_ctm-mob-dn-cn-wt-ft-se-ic-dc,
290
+ var(--_ctm-tab-dn-cn-wt-ft-se-ic-dc, var(--_ctm-dn-cn-wt-ft-se-ic-dc))
291
+ );
292
+ text-align: var(
293
+ --_ctm-mob-dn-cn-wt-tt-an-dc,
294
+ var(--_ctm-tab-dn-cn-wt-tt-an-dc, var(--_ctm-dn-cn-wt-tt-an-dc))
295
+ );
296
+ // color: var(--_primary-400);
297
+ // font-weight: 700;
298
+ }
299
+ }
300
+ }
301
+ }
302
+ .apply_coupon_code_btn {
303
+ padding: 12px;
304
+ white-space: nowrap;
305
+ }
306
+ .btn__with__text[data-btn-name="applyButton"] {
307
+ width: 100%;
308
+ &[data-show-shadow="false"] {
309
+ --_show-shadow: none;
310
+ }
311
+ &[data-icon-position="left"] {
312
+ --_sf-fd-bn: row;
313
+ }
314
+ &[data-icon-position="right"] {
315
+ --_sf-fd-bn: row-reverse;
316
+ }
317
+ &[data-icon-position="center"] {
318
+ --_sf-fd-bn: row;
319
+ }
320
+
321
+ &:hover {
322
+ --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-bd-cr)};
323
+ --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-cr)};
324
+ --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-se)};
325
+ --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-wh)};
326
+ --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-rs)};
327
+ --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-at)};
328
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-gp)};
329
+
330
+ // for shadow
331
+ --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-ae)};
332
+ --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-br)};
333
+ --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-hr)};
334
+ --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-as-ay-bn-hr-se-sw-cr)};
335
+ // for font
336
+
337
+ --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-cr)};
338
+ --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-fy)};
339
+ --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se)};
340
+ --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-wt)};
341
+ --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se-ic)};
342
+ --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-tt-an)};
343
+ --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-lr-sg)};
344
+ --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-le-ht)};
345
+
346
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
347
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
348
+ --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-c1)};
349
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ue)};
350
+
351
+ // for pading and width
352
+ --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-pg)};
353
+ --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-wh)};
354
+ &[data-hover-show-shadow="false"] {
355
+ --_hover-show-shadow: none;
356
+ }
357
+ &[data-hover-show-icon="false"] {
358
+ --_hover-show-icon: none;
359
+ }
360
+ }
361
+
362
+ background-color: var(
363
+ --_sf-hr-bd-cr,
364
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-bd-cr)
365
+ );
366
+
367
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-pg));
368
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-wh));
369
+ display: flex;
370
+ flex-direction: var(--_sf-fd-bn);
371
+ align-items: center;
372
+
373
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-at));
374
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-gp));
375
+
376
+ border-radius: var(
377
+ --_sf-hr-br-rs,
378
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-rs)
379
+ );
380
+
381
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-ae))
382
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-br))
383
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-sd))
384
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-cr));
385
+ width: 140px;
386
+ display: flex;
387
+ &[data-show-border="true"] {
388
+ // width: 100%;
389
+ border-color: var(
390
+ --_sf-hr-br-cr,
391
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-cr)
392
+ );
393
+
394
+ border-style: var(
395
+ --_sf-hr-br-se,
396
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-se)
397
+ );
398
+
399
+ border-width: var(
400
+ --_sf-hr-br-wh,
401
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-wh)
402
+ );
403
+ }
404
+
405
+ .txt {
406
+ display: flex;
407
+
408
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-cr));
409
+
410
+ font-family:
411
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-fy)),
412
+ sans-serif;
413
+
414
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se));
415
+
416
+ font-weight: var(
417
+ --_sf-hr-ft-wt,
418
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-wt)
419
+ );
420
+
421
+ font-style: var(
422
+ --_sf-hr-ft-se-ic,
423
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se-ic)
424
+ );
425
+
426
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-tt-an));
427
+
428
+ letter-spacing: var(
429
+ --_sf-hr-lr-sg,
430
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-lr-sg)
431
+ );
432
+
433
+ line-height: var(
434
+ --_sf-hr-le-ht,
435
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-le-ht)
436
+ );
437
+
438
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
439
+ }
440
+
441
+ .icon {
442
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
443
+ svg {
444
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));
445
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));
446
+
447
+ path {
448
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-c1));
449
+ }
450
+ }
451
+ }
452
+ [data-element-style="Text"] {
453
+ display: inline-block;
454
+ width: 100%;
455
+ }
456
+
457
+ .icon--hover {
458
+ // position: absolute;
459
+ // inset: 0;
460
+ // opacity: 0;
461
+ display: none;
462
+ transition: opacity 0.2s ease;
463
+ }
464
+
465
+ &:hover .icon--hover {
466
+ // opacity: 1;
467
+ display: flex;
468
+ }
469
+
470
+ &:hover .icon--default {
471
+ // opacity: 0;
472
+ display: none;
473
+ }
474
+ }
475
+ }
476
+ .coupon_code_apply_section {
477
+ display: flex;
478
+ flex-direction: column;
479
+ gap: 16px;
480
+ .coupon_code_fields_wrapper {
481
+ display: flex;
482
+ align-items: center;
483
+ justify-content: space-between;
484
+ gap: 12px;
485
+ input {
486
+ // border: 1px solid #d0d5dd;
487
+ // padding: 12px;
488
+ // width: 100%;
489
+ // border-radius: 4px;
490
+ font-family: var(
491
+ --_ctm-mob-dn-cn-wt-it-fd-ft-fy,
492
+ var(--_ctm-tab-dn-cn-wt-it-fd-ft-fy, var(--_ctm-dn-cn-wt-it-fd-ft-fy))
493
+ );
494
+ color: var(
495
+ --_ctm-mob-dn-cn-wt-it-fd-cr,
496
+ var(--_ctm-tab-dn-cn-wt-it-fd-cr, var(--_ctm-dn-cn-wt-it-fd-cr))
497
+ );
498
+ font-weight: var(
499
+ --_ctm-mob-dn-cn-wt-it-fd-ft-wt,
500
+ var(--_ctm-tab-dn-cn-wt-it-fd-ft-wt, var(--_ctm-dn-cn-wt-it-fd-ft-wt))
501
+ );
502
+ font-size: var(
503
+ --_ctm-mob-dn-cn-wt-it-fd-ft-se,
504
+ var(--_ctm-tab-dn-cn-wt-it-fd-ft-se, var(--_ctm-dn-cn-wt-it-fd-ft-se))
505
+ );
506
+ text-decoration: var(
507
+ --_ctm-mob-dn-cn-wt-it-fd-ue,
508
+ var(--_ctm-tab-dn-cn-wt-it-fd-ue, var(--_ctm-dn-cn-wt-it-fd-ue))
509
+ );
510
+ letter-spacing: var(
511
+ --_ctm-mob-dn-cn-wt-it-fd-lr-sg,
512
+ var(--_ctm-tab-dn-cn-wt-it-fd-lr-sg, var(--_ctm-dn-cn-wt-it-fd-lr-sg))
513
+ );
514
+ line-height: var(
515
+ --_ctm-mob-dn-cn-wt-it-fd-le-ht,
516
+ var(--_ctm-tab-dn-cn-wt-it-fd-le-ht, var(--_ctm-dn-cn-wt-it-fd-le-ht))
517
+ );
518
+ font-style: var(
519
+ --_ctm-mob-dn-cn-wt-it-fd-ft-se-ic,
520
+ var(--_ctm-tab-dn-cn-wt-it-fd-ft-se-ic, var(--_ctm-dn-cn-wt-it-fd-ft-se-ic))
521
+ );
522
+ text-align: var(
523
+ --_ctm-mob-dn-cn-wt-it-fd-tt-an,
524
+ var(--_ctm-tab-dn-cn-wt-it-fd-tt-an, var(--_ctm-dn-cn-wt-it-fd-tt-an))
525
+ );
526
+ background-color: var(
527
+ --_ctm-mob-dn-cn-wt-it-fd-bd-cr,
528
+ var(--_ctm-tab-dn-cn-wt-it-fd-bd-cr, var(--_ctm-dn-cn-wt-it-fd-bd-cr))
529
+ );
530
+ padding: var(
531
+ --_ctm-mob-dn-cn-wt-it-fd-pg,
532
+ var(--_ctm-tab-dn-cn-wt-it-fd-pg, var(--_ctm-dn-cn-wt-it-fd-pg))
533
+ );
534
+ gap: var(
535
+ --_ctm-mob-dn-cn-wt-it-fd-im-gp,
536
+ var(--_ctm-tab-dn-cn-wt-it-fd-im-gp, var(--_ctm-dn-cn-wt-it-fd-im-gp))
537
+ );
538
+ border-color: var(
539
+ --_ctm-mob-dn-cn-wt-it-fd-br-cr,
540
+ var(--_ctm-tab-dn-cn-wt-it-fd-br-cr, var(--_ctm-dn-cn-wt-it-fd-br-cr))
541
+ );
542
+ border-style: var(
543
+ --_ctm-mob-dn-cn-wt-it-fd-br-se,
544
+ var(--_ctm-tab-dn-cn-wt-it-fd-br-se, var(--_ctm-dn-cn-wt-it-fd-br-se))
545
+ );
546
+ border-width: var(
547
+ --_ctm-mob-dn-cn-wt-it-fd-br-wh,
548
+ var(--_ctm-tab-dn-cn-wt-it-fd-br-wh, var(--_ctm-dn-cn-wt-it-fd-br-wh))
549
+ );
550
+ border-radius: var(
551
+ --_ctm-mob-dn-cn-wt-it-fd-br-rs,
552
+ var(--_ctm-tab-dn-cn-wt-it-fd-br-rs, var(--_ctm-dn-cn-wt-it-fd-br-rs))
553
+ );
554
+ box-shadow: var(
555
+ --_ctm-mob-dn-cn-wt-it-fd-sw-ae,
556
+ var(--_ctm-tab-dn-cn-wt-it-fd-sw-ae, var(--_ctm-dn-cn-wt-it-fd-sw-ae))
557
+ )
558
+ var(
559
+ --_ctm-mob-dn-cn-wt-it-fd-sw-br,
560
+ var(--_ctm-tab-dn-cn-wt-it-fd-sw-br, var(--_ctm-dn-cn-wt-it-fd-sw-br))
561
+ )
562
+ var(
563
+ --_ctm-mob-dn-cn-wt-it-fd-sw-sd,
564
+ var(--_ctm-tab-dn-cn-wt-it-fd-sw-sd, var(--_ctm-dn-cn-wt-it-fd-sw-sd))
565
+ )
566
+ var(
567
+ --_ctm-mob-dn-cn-wt-it-fd-sw-cr,
568
+ var(--_ctm-tab-dn-cn-wt-it-fd-sw-cr, var(--_ctm-dn-cn-wt-it-fd-sw-cr))
569
+ );
570
+ transition:
571
+ outline border 0.2s ease,
572
+ border 0.2s ease;
573
+ &:focus {
574
+ border: 1px solid var(--_thm-cs-tt-by-tt);
575
+ outline: 2px solid color-mix(in srgb, var(--_thm-cs-tt-by-tt) 10%, transparent);
576
+ }
577
+ }
578
+ .btn__with__text[data-btn-name="applyButton"] {
579
+ width: 100%;
580
+ &[data-show-shadow="false"] {
581
+ --_show-shadow: none;
582
+ }
583
+ &[data-icon-position="left"] {
584
+ --_sf-fd-bn: row;
585
+ }
586
+ &[data-icon-position="right"] {
587
+ --_sf-fd-bn: row-reverse;
588
+ }
589
+ &[data-icon-position="center"] {
590
+ --_sf-fd-bn: row;
591
+ }
592
+
593
+ &:hover {
594
+ --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-bd-cr)};
595
+ --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-cr)};
596
+ --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-se)};
597
+ --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-wh)};
598
+ --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-rs)};
599
+ --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-at)};
600
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-gp)};
601
+
602
+ // for shadow
603
+ --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-ae)};
604
+ --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-br)};
605
+ --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-hr)};
606
+ --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-as-ay-bn-hr-se-sw-cr)};
607
+ // for font
608
+
609
+ --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-cr)};
610
+ --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-fy)};
611
+ --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se)};
612
+ --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-wt)};
613
+ --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se-ic)};
614
+ --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-tt-an)};
615
+ --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-lr-sg)};
616
+ --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-le-ht)};
617
+
618
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
619
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
620
+ --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-c1)};
621
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ue)};
622
+
623
+ // for pading and width
624
+ --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-pg)};
625
+ --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-wh)};
626
+ &[data-hover-show-shadow="false"] {
627
+ --_hover-show-shadow: none;
628
+ }
629
+ &[data-hover-show-icon="false"] {
630
+ --_hover-show-icon: none;
631
+ }
632
+ }
633
+
634
+ background-color: var(
635
+ --_sf-hr-bd-cr,
636
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-bd-cr)
637
+ );
638
+
639
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-pg));
640
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-wh));
641
+ display: flex;
642
+ flex-direction: var(--_sf-fd-bn);
643
+ align-items: center;
644
+
645
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-at));
646
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-gp));
647
+
648
+ border-radius: var(
649
+ --_sf-hr-br-rs,
650
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-rs)
651
+ );
652
+
653
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-ae))
654
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-br))
655
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-sd))
656
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-cr));
657
+ width: 140px;
658
+ display: flex;
659
+ &[data-show-border="true"] {
660
+ // width: 100%;
661
+ border-color: var(
662
+ --_sf-hr-br-cr,
663
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-cr)
664
+ );
665
+
666
+ border-style: var(
667
+ --_sf-hr-br-se,
668
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-se)
669
+ );
670
+
671
+ border-width: var(
672
+ --_sf-hr-br-wh,
673
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-wh)
674
+ );
675
+ }
676
+
677
+ .txt {
678
+ display: flex;
679
+
680
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-cr));
681
+
682
+ font-family:
683
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-fy)),
684
+ sans-serif;
685
+
686
+ font-size: var(
687
+ --_sf-hr-ft-se,
688
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se)
689
+ );
690
+
691
+ font-weight: var(
692
+ --_sf-hr-ft-wt,
693
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-wt)
694
+ );
695
+
696
+ font-style: var(
697
+ --_sf-hr-ft-se-ic,
698
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se-ic)
699
+ );
700
+
701
+ text-align: var(
702
+ --_sf-hr-tt-an,
703
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-tt-an)
704
+ );
705
+
706
+ letter-spacing: var(
707
+ --_sf-hr-lr-sg,
708
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-lr-sg)
709
+ );
710
+
711
+ line-height: var(
712
+ --_sf-hr-le-ht,
713
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-le-ht)
714
+ );
715
+
716
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
717
+ }
718
+
719
+ .icon {
720
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
721
+ svg {
722
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));
723
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));
724
+
725
+ path {
726
+ stroke: var(
727
+ --_sf-hr-in-c1,
728
+ prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-c1)
729
+ );
730
+ }
731
+ }
732
+ }
733
+ [data-element-style="Text"] {
734
+ display: inline-block;
735
+ width: 100%;
736
+ }
737
+
738
+ .icon--hover {
739
+ // position: absolute;
740
+ // inset: 0;
741
+ // opacity: 0;
742
+ display: none;
743
+ transition: opacity 0.2s ease;
744
+ }
745
+
746
+ &:hover .icon--hover {
747
+ // opacity: 1;
748
+ display: flex;
749
+ }
750
+
751
+ &:hover .icon--default {
752
+ // opacity: 0;
753
+ display: none;
754
+ }
755
+ }
756
+ .coupon-search-btn {
757
+ white-space: nowrap;
758
+ padding: prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-pg);
759
+ &:disabled {
760
+ cursor: not-allowed;
761
+ opacity: 0.5;
762
+ }
763
+ }
764
+ }
765
+ .couponCode_divider {
766
+ border: 1px dashed #d0d5dd;
767
+ }
768
+ .coupon-list {
769
+ display: flex;
770
+ flex-direction: column;
771
+ gap: 24px;
772
+ .coupon-item {
773
+ display: flex;
774
+ flex-direction: row;
775
+ gap: 12px;
776
+ justify-content: space-between;
777
+ input {
778
+ width: 18px;
779
+ display: flex;
780
+ flex-direction: column;
781
+ position: relative;
782
+ top: -9px;
783
+ }
784
+ input[type="checkbox"] {
785
+ accent-color: rgb(36 61 198);
786
+ }
787
+ .coupon-info {
788
+ display: flex;
789
+ flex-direction: column;
790
+ gap: 6px;
791
+ .coupon-title {
792
+ // font-size: 16px;
793
+ // font-weight: 700;
794
+ // line-height: 24px;
795
+ // color: #101828;
796
+ font-family: var(
797
+ --_ctm-mob-dn-cn-wt-cn-tt-ft-fy,
798
+ var(--_ctm-tab-dn-cn-wt-cn-tt-ft-fy, var(--_ctm-dn-cn-wt-cn-tt-ft-fy))
799
+ );
800
+ color: var(
801
+ --_ctm-mob-dn-cn-wt-cn-tt-cr,
802
+ var(--_ctm-tab-dn-cn-wt-cn-tt-cr, var(--_ctm-dn-cn-wt-cn-tt-cr))
803
+ );
804
+ font-weight: var(
805
+ --_ctm-mob-dn-cn-wt-cn-tt-ft-wt,
806
+ var(--_ctm-tab-dn-cn-wt-cn-tt-ft-wt, var(--_ctm-dn-cn-wt-cn-tt-ft-wt))
807
+ );
808
+ font-size: var(
809
+ --_ctm-mob-dn-cn-wt-cn-tt-ft-se,
810
+ var(--_ctm-tab-dn-cn-wt-cn-tt-ft-se, var(--_ctm-dn-cn-wt-cn-tt-ft-se))
811
+ );
812
+ text-decoration: var(
813
+ --_ctm-mob-dn-cn-wt-cn-tt-ue,
814
+ var(--_ctm-tab-dn-cn-wt-cn-tt-ue, var(--_ctm-dn-cn-wt-cn-tt-ue))
815
+ );
816
+ letter-spacing: var(
817
+ --_ctm-mob-dn-cn-wt-cn-tt-lr-sg,
818
+ var(--_ctm-tab-dn-cn-wt-cn-tt-lr-sg, var(--_ctm-dn-cn-wt-cn-tt-lr-sg))
819
+ );
820
+ line-height: var(
821
+ --_ctm-mob-dn-cn-wt-cn-tt-le-ht,
822
+ var(--_ctm-tab-dn-cn-wt-cn-tt-le-ht, var(--_ctm-dn-cn-wt-cn-tt-le-ht))
823
+ );
824
+ font-style: var(
825
+ --_ctm-mob-dn-cn-wt-cn-tt-ft-se-ic,
826
+ var(--_ctm-tab-dn-cn-wt-cn-tt-ft-se-ic, var(--_ctm-dn-cn-wt-cn-tt-ft-se-ic))
827
+ );
828
+ text-align: var(
829
+ --_ctm-mob-dn-cn-wt-cn-tt-tt-an,
830
+ var(--_ctm-tab-dn-cn-wt-cn-tt-tt-an, var(--_ctm-dn-cn-wt-cn-tt-tt-an))
831
+ );
832
+ }
833
+ .coupon-currency {
834
+ display: flex;
835
+ align-items: center;
836
+ gap: 8px;
837
+ .coupon-desc {
838
+ // font-size: 14px;
839
+ // font-weight: 400;
840
+ // line-height: 20px;
841
+ // color: #667085;
842
+ font-family: var(
843
+ --_ctm-mob-dn-cn-wt-sd-te-ft-fy,
844
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-fy, var(--_ctm-dn-cn-wt-sd-te-ft-fy))
845
+ );
846
+ color: var(
847
+ --_ctm-mob-dn-cn-wt-sd-te-cr,
848
+ var(--_ctm-tab-dn-cn-wt-sd-te-cr, var(--_ctm-dn-cn-wt-sd-te-cr))
849
+ );
850
+ font-weight: var(
851
+ --_ctm-mob-dn-cn-wt-sd-te-ft-wt,
852
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-wt, var(--_ctm-dn-cn-wt-sd-te-ft-wt))
853
+ );
854
+ font-size: var(
855
+ --_ctm-mob-dn-cn-wt-sd-te-ft-se,
856
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-se, var(--_ctm-dn-cn-wt-sd-te-ft-se))
857
+ );
858
+ text-decoration: var(
859
+ --_ctm-mob-dn-cn-wt-sd-te-ue,
860
+ var(--_ctm-tab-dn-cn-wt-sd-te-ue, var(--_ctm-dn-cn-wt-sd-te-ue))
861
+ );
862
+ letter-spacing: var(
863
+ --_ctm-mob-dn-cn-wt-sd-te-lr-sg,
864
+ var(--_ctm-tab-dn-cn-wt-sd-te-lr-sg, var(--_ctm-dn-cn-wt-sd-te-lr-sg))
865
+ );
866
+ line-height: var(
867
+ --_ctm-mob-dn-cn-wt-sd-te-le-ht,
868
+ var(--_ctm-tab-dn-cn-wt-sd-te-le-ht, var(--_ctm-dn-cn-wt-sd-te-le-ht))
869
+ );
870
+ font-style: var(
871
+ --_ctm-mob-dn-cn-wt-sd-te-ft-se-ic,
872
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-se-ic, var(--_ctm-dn-cn-wt-sd-te-ft-se-ic))
873
+ );
874
+ text-align: var(
875
+ --_ctm-mob-dn-cn-wt-sd-te-tt-an,
876
+ var(--_ctm-tab-dn-cn-wt-sd-te-tt-an, var(--_ctm-dn-cn-wt-sd-te-tt-an))
877
+ );
878
+ }
879
+ .currency_span {
880
+ // font-size: 14px;
881
+ // font-weight: 400;
882
+ // line-height: 20px;
883
+ // color: #667085;
884
+ font-family: var(
885
+ --_ctm-mob-dn-cn-wt-pe-ft-fy,
886
+ var(--_ctm-tab-dn-cn-wt-pe-ft-fy, var(--_ctm-dn-cn-wt-pe-ft-fy))
887
+ );
888
+ color: var(
889
+ --_ctm-mob-dn-cn-wt-pe-cr,
890
+ var(--_ctm-tab-dn-cn-wt-pe-cr, var(--_ctm-dn-cn-wt-pe-cr))
891
+ );
892
+ font-weight: var(
893
+ --_ctm-mob-dn-cn-wt-pe-ft-wt,
894
+ var(--_ctm-tab-dn-cn-wt-pe-ft-wt, var(--_ctm-dn-cn-wt-pe-ft-wt))
895
+ );
896
+ font-size: var(
897
+ --_ctm-mob-dn-cn-wt-pe-ft-se,
898
+ var(--_ctm-tab-dn-cn-wt-pe-ft-se, var(--_ctm-dn-cn-wt-pe-ft-se))
899
+ );
900
+ text-decoration: var(
901
+ --_ctm-mob-dn-cn-wt-pe-ue,
902
+ var(--_ctm-tab-dn-cn-wt-pe-ue, var(--_ctm-dn-cn-wt-pe-ue))
903
+ );
904
+ letter-spacing: var(
905
+ --_ctm-mob-dn-cn-wt-pe-lr-sg,
906
+ var(--_ctm-tab-dn-cn-wt-pe-lr-sg, var(--_ctm-dn-cn-wt-pe-lr-sg))
907
+ );
908
+ line-height: var(
909
+ --_ctm-mob-dn-cn-wt-pe-le-ht,
910
+ var(--_ctm-tab-dn-cn-wt-pe-le-ht, var(--_ctm-dn-cn-wt-pe-le-ht))
911
+ );
912
+ font-style: var(
913
+ --_ctm-mob-dn-cn-wt-pe-ft-se-ic,
914
+ var(--_ctm-tab-dn-cn-wt-pe-ft-se-ic, var(--_ctm-dn-cn-wt-pe-ft-se-ic))
915
+ );
916
+ text-align: var(
917
+ --_ctm-mob-dn-cn-wt-pe-tt-an,
918
+ var(--_ctm-tab-dn-cn-wt-pe-tt-an, var(--_ctm-dn-cn-wt-pe-tt-an))
919
+ );
920
+ }
921
+ }
922
+ }
923
+ .btn__with__text[data-btn-name="removeButton"] {
924
+ // width: 100%;
925
+
926
+ &[data-show-shadow="false"] {
927
+ --_show-shadow: none;
928
+ }
929
+ &[data-icon-position="left"] {
930
+ --_sf-fd-bn: row;
931
+ }
932
+ &[data-icon-position="right"] {
933
+ --_sf-fd-bn: row-reverse;
934
+ }
935
+ &[data-icon-position="center"] {
936
+ --_sf-fd-bn: row;
937
+ }
938
+
939
+ &:hover {
940
+ --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-bd-cr)};
941
+ --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-cr)};
942
+ --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-se)};
943
+ --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-wh)};
944
+ --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-rs)};
945
+ --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-at)};
946
+ --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-gp)};
947
+
948
+ // for shadow
949
+ --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-sw-ae)};
950
+ --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-sw-br)};
951
+ --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-sw-hr)};
952
+ --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-as-re-bn-hr-se-sw-cr)};
953
+ // for font
954
+
955
+ --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-cr)};
956
+ --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-fy)};
957
+ --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-se)};
958
+ --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-wt)};
959
+ --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-se-ic)};
960
+ --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-tt-an)};
961
+ --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-lr-sg)};
962
+ --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-le-ht)};
963
+
964
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-in-se)};
965
+ --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-in-se)};
966
+ --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-in-c1)};
967
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ue)};
968
+
969
+ // for pading and width
970
+ --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-pg)};
971
+ --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-wh)};
972
+ &[data-hover-show-shadow="false"] {
973
+ --_hover-show-shadow: none;
974
+ }
975
+ &[data-hover-show-icon="false"] {
976
+ --_hover-show-icon: none;
977
+ }
978
+ }
979
+
980
+ background-color: var(
981
+ --_sf-hr-bd-cr,
982
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-bd-cr)
983
+ );
984
+
985
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-pg));
986
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-wh));
987
+ display: flex;
988
+ flex-direction: var(--_sf-fd-bn);
989
+ align-items: center;
990
+
991
+ justify-content: var(
992
+ --_sf-hr-at,
993
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-at)
994
+ );
995
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-gp));
996
+
997
+ border-radius: var(
998
+ --_sf-hr-br-rs,
999
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-rs)
1000
+ );
1001
+
1002
+ box-shadow: var(
1003
+ --_sf-hr-sw-ae,
1004
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-ae)
1005
+ )
1006
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-br))
1007
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-sd))
1008
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-cr));
1009
+ width: 140px;
1010
+ display: flex;
1011
+ height: 48px;
1012
+ &[data-show-border="true"] {
1013
+ // width: 100%;
1014
+ border-color: var(
1015
+ --_sf-hr-br-cr,
1016
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-cr)
1017
+ );
1018
+
1019
+ border-style: var(
1020
+ --_sf-hr-br-se,
1021
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-se)
1022
+ );
1023
+
1024
+ border-width: var(
1025
+ --_sf-hr-br-wh,
1026
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-wh)
1027
+ );
1028
+ }
1029
+
1030
+ .txt {
1031
+ display: flex;
1032
+
1033
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-cr));
1034
+
1035
+ font-family:
1036
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-fy)),
1037
+ sans-serif;
1038
+
1039
+ font-size: var(
1040
+ --_sf-hr-ft-se,
1041
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-se)
1042
+ );
1043
+
1044
+ font-weight: var(
1045
+ --_sf-hr-ft-wt,
1046
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-wt)
1047
+ );
1048
+
1049
+ font-style: var(
1050
+ --_sf-hr-ft-se-ic,
1051
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-se-ic)
1052
+ );
1053
+
1054
+ text-align: var(
1055
+ --_sf-hr-tt-an,
1056
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-tt-an)
1057
+ );
1058
+
1059
+ letter-spacing: var(
1060
+ --_sf-hr-lr-sg,
1061
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-lr-sg)
1062
+ );
1063
+
1064
+ line-height: var(
1065
+ --_sf-hr-le-ht,
1066
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-le-ht)
1067
+ );
1068
+
1069
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1070
+ }
1071
+
1072
+ .icon {
1073
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1074
+ svg {
1075
+ width: var(
1076
+ --_sf-hr-in-se,
1077
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-in-se)
1078
+ );
1079
+ height: var(
1080
+ --_sf-hr-in-se,
1081
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-in-se)
1082
+ );
1083
+
1084
+ path {
1085
+ stroke: var(
1086
+ --_sf-hr-in-c1,
1087
+ prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-in-c1)
1088
+ );
1089
+ }
1090
+ }
1091
+ }
1092
+ [data-element-style="Text"] {
1093
+ display: inline-block;
1094
+ width: 100%;
1095
+ }
1096
+
1097
+ .icon--hover {
1098
+ // position: absolute;
1099
+ // inset: 0;
1100
+ // opacity: 0;
1101
+ display: none;
1102
+ transition: opacity 0.2s ease;
1103
+ }
1104
+
1105
+ &:hover .icon--hover {
1106
+ // opacity: 1;
1107
+ display: flex;
1108
+ }
1109
+
1110
+ &:hover .icon--default {
1111
+ // opacity: 0;
1112
+ display: none;
1113
+ }
1114
+ }
1115
+ .remove-btn {
1116
+ padding: prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-pg);
1117
+ }
1118
+ }
1119
+ }
1120
+ .coupon-footer-section {
1121
+ display: flex;
1122
+ justify-content: space-between;
1123
+ .coupon-savings {
1124
+ .title {
1125
+ font-size: 14px;
1126
+ font-weight: 400;
1127
+ line-height: 20px;
1128
+ color: #344054;
1129
+ }
1130
+ .price {
1131
+ font-size: 16px;
1132
+ font-weight: 700;
1133
+ line-height: 24px;
1134
+ color: #101828;
1135
+ }
1136
+ }
1137
+ .apply-coupon-primary-btn {
1138
+ width: 158px;
1139
+ height: 48px;
1140
+ white-space: nowrap;
1141
+ }
1142
+ }
1143
+ }
1144
+ }
1145
+ }
1146
+ }
1147
+ }
1148
+
1149
+ // .coupon_code {
1150
+ // border: 1px solid var(--_gray-300);
1151
+ // border-radius: 4px;
1152
+ // .coupon_code_header {
1153
+ // background-color: var(--_gray-100);
1154
+ // padding: 12px 12px 14px 12px;
1155
+ // border-bottom: 0.5px solid var(--_gray-300);
1156
+ // h3 {
1157
+ // font-size: 16px;
1158
+ // color: var(--_gray-900);
1159
+ // }
1160
+ // }
1161
+ // .coupon_code_body {
1162
+ // display: flex;
1163
+ // flex-direction: column;
1164
+ // gap: 16px;
1165
+ // padding: 16px;
1166
+
1167
+ // .coupon_code_apply_section {
1168
+ // .coupon_code_fields_wrapper {
1169
+ // display: flex;
1170
+ // gap: 12px;
1171
+ // &.divider {
1172
+ // padding-bottom: 16px;
1173
+ // border-bottom: 1px dashed var(--_gray-300);
1174
+ // }
1175
+ // .coupon-search-input {
1176
+ // padding: 10px 16px;
1177
+ // border: 1px solid var(--_gray-300);
1178
+ // border-radius: 4px;
1179
+ // height: 40px;
1180
+ // &:focus {
1181
+ // outline: 2px solid var(--_gray-100);
1182
+ // }
1183
+ // }
1184
+ // .coupon-search-btn {
1185
+ // padding: 10px 16px 12px 16px;
1186
+ // white-space: nowrap;
1187
+ // height: 40px;
1188
+ // }
1189
+ // }
1190
+ // .coupon-list {
1191
+ // .coupon-item {
1192
+ // .coupon-info {
1193
+ // .coupon-title {
1194
+ // font-size: 16px;
1195
+ // font-weight: 700;
1196
+ // color: var(--_gray-900);
1197
+ // }
1198
+ // .coupon-desc {
1199
+ // font-size: 14px;
1200
+ // font-weight: 400;
1201
+ // color: var(--_gray-600);
1202
+ // }
1203
+ // .remove-btn {
1204
+ // padding: 12px;
1205
+ // color: var(--_gray-900);
1206
+ // }
1207
+ // }
1208
+ // }
1209
+ // }
1210
+ // }
1211
+ // .apply_coupon_code_body {
1212
+ // display: flex;
1213
+ // align-items: center;
1214
+ // justify-content: space-between;
1215
+ // gap: 12px;
1216
+ // &:not(:last-child) {
1217
+ // margin-bottom: 12px;
1218
+ // }
1219
+ // .apply_coupon_code_flex {
1220
+ // display: flex;
1221
+ // gap: 12px;
1222
+ // .cpn__sale__icon {
1223
+ // margin-top: 4px;
1224
+ // }
1225
+ // .apply_coupon_code {
1226
+ // display: flex;
1227
+ // flex-direction: column;
1228
+ // .cpn_sale_text {
1229
+ // font-size: 14px;
1230
+ // font-weight: 400;
1231
+ // color: var(--_gray-900);
1232
+ // }
1233
+ // }
1234
+ // }
1235
+ // .cpn_sale_desc {
1236
+ // font-size: 14px;
1237
+ // font-weight: 400;
1238
+ // color: var(--_gray-600);
1239
+ // }
1240
+ // .apply_coupon_code_btn {
1241
+ // padding: 8px 16px;
1242
+ // }
1243
+ // .remove_coupon_code_btn {
1244
+ // padding: 8px 16px;
1245
+ // border: 1px solid var(--_gray-300);
1246
+ // border-radius: 4px;
1247
+ // color: var(--_gray-900);
1248
+ // &:hover {
1249
+ // background-color: var(--_gray-100);
1250
+ // }
1251
+ // }
1252
+ // }
1253
+ // }
1254
+ // }