@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.72

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 (141) hide show
  1. package/dist/add-existing-form.scss +68 -68
  2. package/dist/add-products-tab-details.scss +4071 -4071
  3. package/dist/add-products-tab-uom-details.scss +1106 -1106
  4. package/dist/add-products-tab.scss +2377 -2377
  5. package/dist/allocation-header-quota-details.scss +609 -609
  6. package/dist/allocations-quota-details.scss +525 -525
  7. package/dist/amount-estimator.scss +1192 -1192
  8. package/dist/animation-control.scss +23 -23
  9. package/dist/badge.scss +408 -408
  10. package/dist/brand-basic-elements.scss +387 -387
  11. package/dist/brand.scss +142 -142
  12. package/dist/breadcrumbs.scss +966 -966
  13. package/dist/builder.js +1 -1
  14. package/dist/bulk-order-pad.scss +692 -692
  15. package/dist/bundleDetails.scss +6189 -6189
  16. package/dist/buy-for-tab-container.scss +141 -141
  17. package/dist/buy-for-tab.scss +649 -649
  18. package/dist/buy-for-tabs-container-item.scss +80 -80
  19. package/dist/buyForPopup.scss +339 -339
  20. package/dist/cart-details.scss +3986 -3986
  21. package/dist/cart-products-sidebar.scss +211 -211
  22. package/dist/cart-wrapper.scss +127 -127
  23. package/dist/cartDropdownOverlay.scss +653 -653
  24. package/dist/cartGrouping.scss +89 -89
  25. package/dist/category-groups-element.scss +739 -739
  26. package/dist/category-groups-quota-details.scss +626 -626
  27. package/dist/category.scss +137 -137
  28. package/dist/categoryDetails.scss +61 -61
  29. package/dist/categoryWidget.scss +34 -34
  30. package/dist/checkbox-radio.scss +124 -124
  31. package/dist/code-temp.scss +59 -59
  32. package/dist/colorpicker_v2.scss +62 -62
  33. package/dist/common-element.scss +35 -35
  34. package/dist/confirm-modal.scss +370 -370
  35. package/dist/confirmationModal.scss +139 -139
  36. package/dist/contact-us.scss +105 -105
  37. package/dist/container.scss +168 -168
  38. package/dist/custom-fonts.scss +100 -100
  39. package/dist/customization-tree.scss +162 -162
  40. package/dist/default-dropdown.scss +259 -259
  41. package/dist/dropdownTemplate.scss +699 -699
  42. package/dist/editCartItem.scss +110 -110
  43. package/dist/embed-temp.scss +73 -73
  44. package/dist/embroider-preview-element.scss +94 -94
  45. package/dist/embroider-template-1-v2.scss +1105 -1105
  46. package/dist/embroider-template-1.scss +501 -501
  47. package/dist/embroidery.scss +247 -247
  48. package/dist/employee-bulk-order.scss +4060 -4060
  49. package/dist/emtpy-templates.scss +165 -165
  50. package/dist/faq.scss +696 -696
  51. package/dist/fb-dropdown.scss +135 -135
  52. package/dist/filter-results.scss +361 -361
  53. package/dist/flex-text-editor.scss +271 -271
  54. package/dist/form-preview.scss +530 -530
  55. package/dist/global-styles.scss +198 -198
  56. package/dist/grid.scss +169 -169
  57. package/dist/icon-library.scss +78 -78
  58. package/dist/image-for-product.scss +21 -21
  59. package/dist/image-temp.scss +203 -203
  60. package/dist/item-stock.scss +93 -93
  61. package/dist/kitDetails.scss +5739 -5739
  62. package/dist/kits.scss +305 -305
  63. package/dist/language-selector.scss +948 -948
  64. package/dist/last-x-orders.scss +285 -285
  65. package/dist/layouter-item.scss +141 -141
  66. package/dist/layouter-pro-item.scss +139 -139
  67. package/dist/layouter-pro.scss +134 -134
  68. package/dist/layouter.scss +491 -491
  69. package/dist/light-box-v2.scss +155 -155
  70. package/dist/lightbox.scss +78 -78
  71. package/dist/loader.scss +37 -37
  72. package/dist/login.scss +29 -11
  73. package/dist/marchandiserSets.scss +141 -141
  74. package/dist/mega-menu-container.scss +152 -152
  75. package/dist/menu-item.scss +19 -19
  76. package/dist/menu-v2.scss +999 -999
  77. package/dist/menu.scss +174 -174
  78. package/dist/multi-select-dropdown.scss +316 -316
  79. package/dist/my-templates.scss +477 -477
  80. package/dist/my-wishlist.scss +27 -27
  81. package/dist/option-bar.scss +886 -886
  82. package/dist/order-processing.scss +61 -61
  83. package/dist/order-status.scss +74 -0
  84. package/dist/overflow-module.scss +63 -63
  85. package/dist/past-orders.scss +1039 -1039
  86. package/dist/payment-methods.scss +307 -307
  87. package/dist/phone-input.scss +208 -208
  88. package/dist/pickup-locations.scss +1359 -1359
  89. package/dist/position-module.scss +95 -95
  90. package/dist/prefix-list.scss +86 -86
  91. package/dist/product-actions.scss +2872 -2872
  92. package/dist/product-basic-elements.scss +600 -600
  93. package/dist/product-customizations.scss +155 -155
  94. package/dist/product-inventory.scss +1621 -1621
  95. package/dist/product-labels.scss +265 -265
  96. package/dist/product-price.scss +3392 -3392
  97. package/dist/product-promotions.scss +3224 -3224
  98. package/dist/product-sizechart.scss +1921 -1921
  99. package/dist/product.scss +140 -140
  100. package/dist/profile.scss +824 -824
  101. package/dist/quantity-selector.scss +1074 -1074
  102. package/dist/quick-inventory-check.scss +285 -285
  103. package/dist/quick-links.scss +627 -627
  104. package/dist/quota-details.scss +526 -526
  105. package/dist/repeater-embla-controls.scss +211 -211
  106. package/dist/repeater-grid-toggle.scss +206 -206
  107. package/dist/repeater-item.scss +152 -152
  108. package/dist/repeater.scss +946 -946
  109. package/dist/request-for-quotes.scss +841 -841
  110. package/dist/responsive-behaviour.scss +29 -29
  111. package/dist/rfqs.scss +861 -861
  112. package/dist/scroll.scss +414 -414
  113. package/dist/search.scss +689 -689
  114. package/dist/section.scss +276 -276
  115. package/dist/shareCartSideBar.scss +254 -254
  116. package/dist/shipping-estimator.scss +41 -41
  117. package/dist/shipping-payments.scss +2518 -2518
  118. package/dist/simple-list.scss +338 -338
  119. package/dist/skeleton.scss +64 -64
  120. package/dist/sort.scss +176 -176
  121. package/dist/spotlight.scss +1706 -1706
  122. package/dist/stack.scss +171 -171
  123. package/dist/static-global.scss +292 -292
  124. package/dist/static-text.scss +52 -52
  125. package/dist/stockStatus.scss +70 -70
  126. package/dist/store-locations.scss +1592 -1592
  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 +141 -141
  131. package/dist/table.scss +9 -0
  132. package/dist/tabs.scss +440 -440
  133. package/dist/text-temp.scss +109 -109
  134. package/dist/theme-classes.scss +421 -421
  135. package/dist/toaster.scss +392 -392
  136. package/dist/toggle-button.scss +32 -32
  137. package/dist/transform-properties-module.scss +20 -20
  138. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  139. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +1 -0
  140. package/dist/wishlist-overlay.scss +48 -48
  141. package/package.json +1 -1
package/dist/add-products-tab.scss CHANGED
@@ -1,2377 +1,2377 @@
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
- // $defaultValues: (
8
- // --_dm-flt: getListOfResponsive(flex-end, flex-start),
9
- // );
10
- div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
11
- display: flow-root !important;
12
- }
13
- [data-div-type="element"] {
14
- &[data-element-type="addProductsTab"] {
15
- // Import additional styles from partial file
16
- @import "./add-products-tab-details";
17
- @import "./add-products-tab-uom-details";
18
- @import "./product-image-bundles.scss";
19
-
20
- // width: var(
21
- // --_sf-el-wh-st-mx,
22
- // calc(
23
- // 1% *
24
- // var(
25
- // --_mob-ctm-ele-nw-wh-vl,
26
- // var(--_tab-ctm-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
27
- // )
28
- // )
29
- // );
30
- // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
31
- & > div {
32
- &.wrapper {
33
- width: 100%;
34
- // &:has(.buyfor_content_loader) {
35
- // display: flex;
36
- // justify-content: center;
37
- // align-items: center;
38
- // width: 100%;
39
- // height: 100%;
40
- // }
41
- }
42
- }
43
-
44
- .buyfor_content_loader {
45
- display: flex;
46
- flex-direction: column;
47
- align-items: center;
48
- justify-content: center;
49
- min-height: 350px;
50
- .spinner_sm {
51
- border: 4px solid var(--_gray-200);
52
- border-top: 4px solid var(--_thm-cs-at-py);
53
- border-radius: 50%;
54
- width: 50px;
55
- height: 50px;
56
- animation: spin 1s linear infinite;
57
- margin-bottom: 20px;
58
- }
59
-
60
- @keyframes spin {
61
- 0% {
62
- transform: rotate(0deg);
63
- }
64
- 100% {
65
- transform: rotate(360deg);
66
- }
67
- }
68
-
69
- .loading-text {
70
- font-size: 1.2rem;
71
- letter-spacing: 2px;
72
- animation: fade 1.5s infinite;
73
- }
74
-
75
- @keyframes fade {
76
- 0%,
77
- 100% {
78
- opacity: 0.3;
79
- }
80
- 50% {
81
- opacity: 1;
82
- }
83
- }
84
- }
85
-
86
- .product-section {
87
- display: flex;
88
- justify-content: space-between;
89
- align-items: center;
90
- border-bottom: 1px solid var(--_thm-cs-be-se-3);
91
- padding-bottom: 24px;
92
- .section-title {
93
- font-size: var(
94
- --_ctm-mob-dn-hr-te-ft-se,
95
- var(--_ctm-tab-dn-hr-te-ft-se, var(--_ctm-dn-hr-te-ft-se))
96
- );
97
- font-family: var(
98
- --_ctm-mob-dn-hr-te-ft-fy,
99
- var(--_ctm-tab-dn-hr-te-ft-fy, var(--_ctm-dn-hr-te-ft-fy))
100
- );
101
- text-transform: var(
102
- --_ctm-mob-dn-hr-te-tt-tm,
103
- var(--_ctm-tab-dn-hr-te-tt-tm, var(--_ctm-dn-hr-te-tt-tm))
104
- );
105
- word-wrap: var(
106
- --_ctm-mob-dn-hr-te-wd-wp,
107
- var(--_ctm-tab-dn-hr-te-wd-wp, var(--_ctm-dn-hr-te-wd-wp))
108
- );
109
- word-break: var(
110
- --_ctm-mob-dn-hr-te-wd-bk,
111
- var(--_ctm-tab-dn-hr-te-wd-bk, var(--_ctm-dn-hr-te-wd-bk))
112
- );
113
- font-weight: var(
114
- --_ctm-mob-dn-hr-te-ft-wt,
115
- var(--_ctm-tab-dn-hr-te-ft-wt, var(--_ctm-dn-hr-te-ft-wt))
116
- );
117
- line-height: var(
118
- --_ctm-mob-dn-hr-te-le-ht,
119
- var(--_ctm-tab-dn-hr-te-le-ht, var(--_ctm-dn-hr-te-le-ht))
120
- );
121
- letter-spacing: var(
122
- --_ctm-mob-dn-hr-te-lr-sg,
123
- var(--_ctm-tab-dn-hr-te-lr-sg, var(--_ctm-dn-hr-te-lr-sg))
124
- );
125
- color: var(--_ctm-mob-dn-hr-te-cr, var(--_ctm-tab-dn-hr-te-cr, var(--_ctm-dn-hr-te-cr)));
126
- }
127
- .search-bar {
128
- display: flex;
129
- align-items: center;
130
- gap: 0.5rem;
131
-
132
- .search-input {
133
- display: flex;
134
- align-items: center;
135
- border: 1px solid var(--_gray-300);
136
- border-radius: 4px;
137
- padding: 12px;
138
- background: transparent;
139
- // height: 40px;
140
- transition:
141
- outline border 0.2s ease,
142
- border 0.2s ease;
143
- &:focus-within {
144
- // border: 1px solid var(--_thm-cs-tt-by-tt);
145
- border: 1px solid color-mix(in srgb, var(--_thm-cs-tt-by-tt) 40%, transparent);
146
- outline: 2px solid color-mix(in srgb, var(--_thm-cs-tt-by-tt) 10%, transparent);
147
- }
148
-
149
- .icon {
150
- margin-right: 8px;
151
- color: var(--_thm-cs-be-se-3);
152
- }
153
- .close-icon {
154
- svg {
155
- height: 12px;
156
- }
157
- }
158
-
159
- input {
160
- border: none;
161
- outline: none;
162
- font-size: 14px;
163
- width: 160px;
164
- }
165
- }
166
-
167
- .filter-btn {
168
- border: 1px solid #d1d5db;
169
- background: white;
170
- border-radius: 4px;
171
- padding: 0.25rem 0.5rem;
172
- font-size: 18px;
173
- cursor: pointer;
174
- }
175
- }
176
- }
177
- .buyforcart_empty_wrp {
178
- height: 300px;
179
- }
180
- .add-product-wrapper {
181
- display: grid;
182
- grid-template-columns: 1fr 1fr;
183
- // gap: 48px;
184
- &:has(.empty_template) {
185
- display: flex;
186
- padding: 48px;
187
- }
188
-
189
- .product-list {
190
- display: flex;
191
- flex-direction: column;
192
- gap: 48px;
193
-
194
- .product-category {
195
- display: flex;
196
- flex-direction: column;
197
- gap: 16px;
198
-
199
- .product-header {
200
- display: flex;
201
- gap: 6px;
202
- border-bottom: 0.5px solid #d0d5dd;
203
- padding-bottom: 16px;
204
- flex-direction: column;
205
-
206
- h2 {
207
- font-size: 20px;
208
- color: var(--_gray-900);
209
- font-weight: 700;
210
- line-height: 30px;
211
- }
212
- .product-subheader {
213
- display: flex;
214
- flex-direction: row;
215
- gap: 12px;
216
- word-break: keep-all;
217
- align-items: center;
218
-
219
- @media (max-width: 500px) {
220
- flex-direction: column;
221
- white-space: nowrap;
222
- align-items: flex-start;
223
- }
224
- .product-quota {
225
- font-weight: 400;
226
- font-size: 14px;
227
- line-height: 20px;
228
- letter-spacing: 0%;
229
- color: var(--_gray-500);
230
- padding-right: 12px;
231
- border-right: 1px solid var(--_border-light-color);
232
- gap: 6px;
233
- display: flex;
234
- span {
235
- font-weight: 700;
236
- font-size: 14px;
237
- line-height: 20px;
238
- color: var(--_gray-900);
239
- }
240
- }
241
- .product-payment-methods {
242
- font-weight: 400;
243
- font-size: 14px;
244
- line-height: 20px;
245
- letter-spacing: 0%;
246
- color: var(--_gray-500);
247
- gap: 6px;
248
- display: flex;
249
- span {
250
- font-weight: 700;
251
- font-size: 14px;
252
- line-height: 20px;
253
- letter-spacing: 0%;
254
- color: var(--_gray-900);
255
- }
256
- }
257
- }
258
- }
259
-
260
- .product-grid {
261
- display: grid;
262
- // grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
263
- grid-template-columns: 1fr 1fr;
264
- gap: 16px;
265
- max-height: 900px;
266
- overflow-y: auto;
267
- overflow-x: hidden;
268
- padding: 24px 24px 24px 0;
269
- background-color: var(--_base-white);
270
-
271
- @media (max-width: 500px) {
272
- grid-template-columns: 1fr;
273
- }
274
-
275
- .product-card {
276
- display: flex;
277
- flex-direction: column;
278
- }
279
- .product-card,
280
- .tile {
281
- gap: 24px;
282
- transition: background border 400ms ease-in-out;
283
- // padding: 16px;
284
- // background-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-bd-cr);
285
- @include BgColorLighter(var(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-bd-cr), 5%);
286
- padding: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-pg);
287
- border-width: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-wh);
288
- border-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-cr);
289
- border-style: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-se);
290
- border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-rs);
291
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-ae)
292
- prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-br)
293
- prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-sd)
294
- prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-cr);
295
- // border: 0.5px solid transparent;
296
- &:hover {
297
- // background-color: var(--_gray-100);
298
- // border: 0.5px solid #243dc6;
299
- cursor: pointer;
300
- // border-radius: 4px;
301
- // background-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-bd-cr);
302
- @include BgColorLighter(var(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-bd-cr), 5%);
303
- padding: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-pg);
304
- border-width: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-wh);
305
- border-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-cr);
306
- border-style: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-se);
307
- border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-rs);
308
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-ae)
309
- prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-br)
310
- prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-sd)
311
- prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-cr);
312
- }
313
- &.active {
314
- // border: 0.5px solid #243dc6;
315
- // border-radius: 4px;
316
- // border-width: 0.5px;
317
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-pg));
318
-
319
- // background-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-bd-cr);
320
- @include BgColorLighter(var(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-bd-cr), 5%);
321
- border-width: var(
322
- --_sf-hr-br-wh,
323
- prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-wh)
324
- );
325
- border-color: var(
326
- --_sf-hr-br-cr,
327
- prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-cr)
328
- );
329
- border-style: var(
330
- --_sf-hr-br-se,
331
- prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-se)
332
- );
333
- border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-rs);
334
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-ae)
335
- prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-br)
336
- prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-sd)
337
- prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-cr);
338
- }
339
-
340
- .product-image {
341
- width: 268px;
342
- height: 240px;
343
- display: flex;
344
- align-items: center;
345
- justify-content: center;
346
- align-self: center;
347
- }
348
-
349
- .product-info {
350
- gap: 4px;
351
- display: flex;
352
- flex-direction: column;
353
-
354
- .product-title {
355
- font-family: var(
356
- --_ctm-mob-dn-pt-cd-pt-cd-te-ft-fy,
357
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-te-ft-fy))
358
- );
359
- text-transform: var(
360
- --_ctm-mob-dn-pt-cd-pt-cd-te-tt-tm,
361
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-tt-tm, var(--_ctm-dn-pt-cd-pt-cd-te-tt-tm))
362
- );
363
- word-wrap: var(
364
- --_ctm-mob-dn-pt-cd-pt-cd-te-wd-wp,
365
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-wd-wp, var(--_ctm-dn-pt-cd-pt-cd-te-wd-wp))
366
- );
367
- word-break: var(
368
- --_ctm-mob-dn-pt-cd-pt-cd-te-wd-bk,
369
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-wd-bk, var(--_ctm-dn-pt-cd-pt-cd-te-wd-bk))
370
- );
371
- font-size: var(
372
- --_ctm-mob-dn-pt-cd-pt-cd-te-ft-se,
373
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-se, var(--_ctm-dn-pt-cd-pt-cd-te-ft-se))
374
- );
375
- font-weight: var(
376
- --_ctm-mob-dn-pt-cd-pt-cd-te-ft-wt,
377
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-te-ft-wt))
378
- );
379
- color: var(
380
- --_ctm-mob-dn-pt-cd-pt-cd-te-cr,
381
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-cr, var(--_ctm-dn-pt-cd-pt-cd-te-cr))
382
- );
383
- line-height: var(
384
- --_ctm-mob-dn-pt-cd-pt-cd-te-le-ht,
385
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-le-ht, var(--_ctm-dn-pt-cd-pt-cd-te-le-ht))
386
- );
387
- letter-spacing: var(
388
- --_ctm-mob-dn-pt-cd-pt-cd-te-lr-sg,
389
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-te-lr-sg))
390
- );
391
- text-decoration: var(
392
- --_ctm-mob-dn-pt-cd-pt-cd-te-ue,
393
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-ue, var(--_ctm-dn-pt-cd-pt-cd-te-ue))
394
- );
395
- font-style: var(
396
- --_ctm-mob-dn-pt-cd-pt-cd-te-ft-se-ic,
397
- var(
398
- --_ctm-tab-dn-pt-cd-pt-cd-te-ft-se-ic,
399
- var(--_ctm-dn-pt-cd-pt-cd-te-ft-se-ic)
400
- )
401
- );
402
- padding: var(
403
- --_ctm-mob-dn-pt-cd-pt-cd-te-pg,
404
- var(--_ctm-tab-dn-pt-cd-pt-cd-te-pg, var(--_ctm-dn-pt-cd-pt-cd-te-pg))
405
- );
406
- }
407
-
408
- .product-code {
409
- font-family: var(
410
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-fy,
411
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-fy))
412
- );
413
- text-transform: var(
414
- --_ctm-mob-dn-pt-cd-pt-cd-dn-tt-tm,
415
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-tt-tm, var(--_ctm-dn-pt-cd-pt-cd-dn-tt-tm))
416
- );
417
- word-wrap: var(
418
- --_ctm-mob-dn-pt-cd-pt-cd-dn-wd-wp,
419
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-wd-wp, var(--_ctm-dn-pt-cd-pt-cd-dn-wd-wp))
420
- );
421
- word-break: var(
422
- --_ctm-mob-dn-pt-cd-pt-cd-dn-wd-bk,
423
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-wd-bk, var(--_ctm-dn-pt-cd-pt-cd-dn-wd-bk))
424
- );
425
- font-size: var(
426
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-se,
427
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-se, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-se))
428
- );
429
- font-weight: var(
430
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-wt,
431
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-wt))
432
- );
433
- color: var(
434
- --_ctm-mob-dn-pt-cd-pt-cd-dn-cr,
435
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-cr, var(--_ctm-dn-pt-cd-pt-cd-dn-cr))
436
- );
437
- line-height: var(
438
- --_ctm-mob-dn-pt-cd-pt-cd-dn-le-ht,
439
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-le-ht, var(--_ctm-dn-pt-cd-pt-cd-dn-le-ht))
440
- );
441
- letter-spacing: var(
442
- --_ctm-mob-dn-pt-cd-pt-cd-dn-lr-sg,
443
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-dn-lr-sg))
444
- );
445
- text-decoration: var(
446
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ue,
447
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ue, var(--_ctm-dn-pt-cd-pt-cd-dn-ue))
448
- );
449
- font-style: var(
450
- --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-se-ic,
451
- var(
452
- --_ctm-tab-dn-pt-cd-pt-cd-dn-ft-se-ic,
453
- var(--_ctm-dn-pt-cd-pt-cd-dn-ft-se-ic)
454
- )
455
- );
456
- padding: var(
457
- --_ctm-mob-dn-pt-cd-pt-cd-dn-pg,
458
- var(--_ctm-tab-dn-pt-cd-pt-cd-dn-pg, var(--_ctm-dn-pt-cd-pt-cd-dn-pg))
459
- );
460
- }
461
- .product-price {
462
- font-family: var(
463
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-fy,
464
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-fy))
465
- );
466
- text-transform: var(
467
- --_ctm-mob-dn-pt-cd-pt-cd-pe-tt-tm,
468
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-tt-tm, var(--_ctm-dn-pt-cd-pt-cd-pe-tt-tm))
469
- );
470
- word-wrap: var(
471
- --_ctm-mob-dn-pt-cd-pt-cd-pe-wd-wp,
472
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-wd-wp, var(--_ctm-dn-pt-cd-pt-cd-pe-wd-wp))
473
- );
474
- word-break: var(
475
- --_ctm-mob-dn-pt-cd-pt-cd-pe-wd-bk,
476
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-wd-bk, var(--_ctm-dn-pt-cd-pt-cd-pe-wd-bk))
477
- );
478
- font-size: var(
479
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-se,
480
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-se, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-se))
481
- );
482
- font-weight: var(
483
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-wt,
484
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-wt))
485
- );
486
- color: var(
487
- --_ctm-mob-dn-pt-cd-pt-cd-pe-cr,
488
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-cr, var(--_ctm-dn-pt-cd-pt-cd-pe-cr))
489
- );
490
- line-height: var(
491
- --_ctm-mob-dn-pt-cd-pt-cd-pe-le-ht,
492
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-le-ht, var(--_ctm-dn-pt-cd-pt-cd-pe-le-ht))
493
- );
494
- letter-spacing: var(
495
- --_ctm-mob-dn-pt-cd-pt-cd-pe-lr-sg,
496
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-pe-lr-sg))
497
- );
498
- text-decoration: var(
499
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ue,
500
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ue, var(--_ctm-dn-pt-cd-pt-cd-pe-ue))
501
- );
502
- font-style: var(
503
- --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-se-ic,
504
- var(
505
- --_ctm-tab-dn-pt-cd-pt-cd-pe-ft-se-ic,
506
- var(--_ctm-dn-pt-cd-pt-cd-pe-ft-se-ic)
507
- )
508
- );
509
- padding: var(
510
- --_ctm-mob-dn-pt-cd-pt-cd-pe-pg,
511
- var(--_ctm-tab-dn-pt-cd-pt-cd-pe-pg, var(--_ctm-dn-pt-cd-pt-cd-pe-pg))
512
- );
513
- }
514
-
515
- .product-meta {
516
- font-size: 0.75rem;
517
- display: flex;
518
- gap: 0.5rem;
519
- margin-top: 0.5rem;
520
- justify-content: space-between;
521
- align-items: center;
522
- .product-views {
523
- gap: 6px;
524
- display: flex;
525
- flex-direction: row;
526
- align-items: center;
527
- .svg_icon {
528
- svg {
529
- path {
530
- stroke: var(--_thm-cs-tt-ss);
531
- }
532
- }
533
- }
534
- .product_info {
535
- gap: 6px;
536
- display: flex;
537
- flex-direction: row;
538
- align-items: center;
539
- .icon {
540
- display: flex;
541
- svg {
542
- width: 20px;
543
- height: 20px;
544
-
545
- path {
546
- stroke: var(--_thm-cs-be-se-3);
547
- }
548
- }
549
- }
550
-
551
- //
552
- // font-weight: 700;
553
- // font-size: 16px;
554
- // line-height: 150%;
555
- // color: var(--_gray-600);
556
- font-family: var(
557
- --_ctm-mob-dn-pt-cd-pt-cd-io-ft-fy,
558
- var(--_ctm-tab-dn-pt-cd-pt-cd-io-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-io-ft-fy))
559
- );
560
- text-transform: var(
561
- --_ctm-mob-dn-pt-cd-pt-cd-io-tt-tm,
562
- var(--_ctm-tab-dn-pt-cd-pt-cd-io-tt-tm, var(--_ctm-dn-pt-cd-pt-cd-io-tt-tm))
563
- );
564
- word-wrap: var(
565
- --_ctm-mob-dn-pt-cd-pt-cd-io-wd-wp,
566
- var(--_ctm-tab-dn-pt-cd-pt-cd-io-wd-wp, var(--_ctm-dn-pt-cd-pt-cd-io-wd-wp))
567
- );
568
- word-break: var(
569
- --_ctm-mob-dn-pt-cd-pt-cd-io-wd-bk,
570
- var(--_ctm-tab-dn-pt-cd-pt-cd-io-wd-bk, var(--_ctm-dn-pt-cd-pt-cd-io-wd-bk))
571
- );
572
- &.flex__overflow {
573
- white-space: normal;
574
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
575
- }
576
- font-size: var(
577
- --_ctm-mob-dn-pt-cd-pt-cd-io-ft-se,
578
- var(--_ctm-tab-dn-pt-cd-pt-cd-io-ft-se, var(--_ctm-dn-pt-cd-pt-cd-io-ft-se))
579
- );
580
- font-weight: var(
581
- --_ctm-mob-dn-pt-cd-pt-cd-io-ft-wt,
582
- var(--_ctm-tab-dn-pt-cd-pt-cd-io-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-io-ft-wt))
583
- );
584
- color: var(
585
- --_ctm-mob-dn-pt-cd-pt-cd-io-cr,
586
- var(--_ctm-tab-dn-pt-cd-pt-cd-io-cr, var(--_ctm-dn-pt-cd-pt-cd-io-cr))
587
- );
588
- line-height: var(
589
- --_ctm-mob-dn-pt-cd-pt-cd-io-le-ht,
590
- var(--_ctm-tab-dn-pt-cd-pt-cd-io-le-ht, var(--_ctm-dn-pt-cd-pt-cd-io-le-ht))
591
- );
592
- letter-spacing: var(
593
- --_ctm-mob-dn-pt-cd-pt-cd-io-lr-sg,
594
- var(--_ctm-tab-dn-pt-cd-pt-cd-io-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-io-lr-sg))
595
- );
596
- text-decoration: var(
597
- --_ctm-mob-dn-pt-cd-pt-cd-io-ue,
598
- var(--_ctm-tab-dn-pt-cd-pt-cd-io-ue, var(--_ctm-dn-pt-cd-pt-cd-io-ue))
599
- );
600
- font-style: var(
601
- --_ctm-mob-dn-pt-cd-pt-cd-io-ft-se-ic,
602
- var(
603
- --_ctm-tab-dn-pt-cd-pt-cd-io-ft-se-ic,
604
- var(--_ctm-dn-pt-cd-pt-cd-io-ft-se-ic)
605
- )
606
- );
607
- padding: var(
608
- --_ctm-mob-dn-pt-cd-pt-cd-io-pg,
609
- var(--_ctm-tab-dn-pt-cd-pt-cd-io-pg, var(--_ctm-dn-pt-cd-pt-cd-io-pg))
610
- );
611
- }
612
- }
613
- .product-cart {
614
- position: relative;
615
- // width: 50px;
616
- // height: 50px;
617
- .icon {
618
- display: flex;
619
- svg {
620
- width: 32px;
621
- height: 32px;
622
-
623
- path {
624
- stroke: var(--_gray-400);
625
- }
626
- }
627
- }
628
- .cart-badge {
629
- background-color: var(--_thm-cs-at-py);
630
- color: #ffffff;
631
- border-radius: 4px;
632
- font-size: 12px;
633
- font-weight: 400;
634
- height: 20px;
635
- width: 20px;
636
- position: absolute;
637
- top: -8px;
638
- right: -8px;
639
- display: flex;
640
- align-items: center;
641
- justify-content: center;
642
- }
643
- }
644
- }
645
- }
646
- }
647
- }
648
- }
649
- }
650
- .add-product-list-details {
651
- // border-left: 1px solid var(--_thm-cs-be-se-3);
652
- border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-cr);
653
- border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-wh);
654
- border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-se);
655
- }
656
- .customizer-panel {
657
- display: flex;
658
- flex-direction: column;
659
- // gap: 12px;
660
- // border-left: 0.5px solid #d0d5dd;
661
- // padding-left: 48px;
662
- padding: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-pg);
663
- gap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-im-gp);
664
- border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-rs);
665
- background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-bd-cr);
666
- // border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-cr);
667
- // border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-wh);
668
- // border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-se);
669
-
670
- .product-header {
671
- display: flex;
672
- flex-direction: column;
673
- gap: 12px;
674
- h2 {
675
- font-family: var(
676
- --_ctm-mob-dn-pt-ds-pt-te-ft-fy,
677
- var(--_ctm-tab-dn-pt-ds-pt-te-ft-fy, var(--_ctm-dn-pt-ds-pt-te-ft-fy))
678
- );
679
- text-transform: var(
680
- --_ctm-mob-dn-pt-ds-pt-te-tt-tm,
681
- var(--_ctm-tab-dn-pt-ds-pt-te-tt-tm, var(--_ctm-dn-pt-ds-pt-te-tt-tm))
682
- );
683
- word-wrap: var(
684
- --_ctm-mob-dn-pt-ds-pt-te-wd-wp,
685
- var(--_ctm-tab-dn-pt-ds-pt-te-wd-wp, var(--_ctm-dn-pt-ds-pt-te-wd-wp))
686
- );
687
- word-break: var(
688
- --_ctm-mob-dn-pt-ds-pt-te-wd-bk,
689
- var(--_ctm-tab-dn-pt-ds-pt-te-wd-bk, var(--_ctm-dn-pt-ds-pt-te-wd-bk))
690
- );
691
- font-size: var(
692
- --_ctm-mob-dn-pt-ds-pt-te-ft-se,
693
- var(--_ctm-tab-dn-pt-ds-pt-te-ft-se, var(--_ctm-dn-pt-ds-pt-te-ft-se))
694
- );
695
- font-weight: var(
696
- --_ctm-mob-dn-pt-ds-pt-te-ft-wt,
697
- var(--_ctm-tab-dn-pt-ds-pt-te-ft-wt, var(--_ctm-dn-pt-ds-pt-te-ft-wt))
698
- );
699
- color: var(
700
- --_ctm-mob-dn-pt-ds-pt-te-cr,
701
- var(--_ctm-tab-dn-pt-ds-pt-te-cr, var(--_ctm-dn-pt-ds-pt-te-cr))
702
- );
703
- line-height: var(
704
- --_ctm-mob-dn-pt-ds-pt-te-le-ht,
705
- var(--_ctm-tab-dn-pt-ds-pt-te-le-ht, var(--_ctm-dn-pt-ds-pt-te-le-ht))
706
- );
707
- letter-spacing: var(
708
- --_ctm-mob-dn-pt-ds-pt-te-lr-sg,
709
- var(--_ctm-tab-dn-pt-ds-pt-te-lr-sg, var(--_ctm-dn-pt-ds-pt-te-lr-sg))
710
- );
711
- // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
712
- // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
713
- padding: var(
714
- --_ctm-dn-mob-pt-ds-pt-te-pg,
715
- var(--_ctm-tab-dn-pt-ds-pt-te-pg, var(--_ctm-dn-pt-ds-pt-te-pg))
716
- );
717
- }
718
- p {
719
- font-family: var(
720
- --_ctm-mob-dn-pt-ds-pt-dn-ft-fy,
721
- var(--_ctm-tab-dn-pt-ds-pt-dn-ft-fy, var(--_ctm-dn-pt-ds-pt-dn-ft-fy))
722
- );
723
- text-transform: var(
724
- --_ctm-mob-dn-pt-ds-pt-dn-tt-tm,
725
- var(--_ctm-tab-dn-pt-ds-pt-dn-tt-tm, var(--_ctm-dn-pt-ds-pt-dn-tt-tm))
726
- );
727
- word-wrap: var(
728
- --_ctm-mob-dn-pt-ds-pt-dn-wd-wp,
729
- var(--_ctm-tab-dn-pt-ds-pt-dn-wd-wp, var(--_ctm-dn-pt-ds-pt-dn-wd-wp))
730
- );
731
- word-break: var(
732
- --_ctm-mob-dn-pt-ds-pt-dn-wd-bk,
733
- var(--_ctm-tab-dn-pt-ds-pt-dn-wd-bk, var(--_ctm-dn-pt-ds-pt-dn-wd-bk))
734
- );
735
- font-size: var(
736
- --_ctm-mob-dn-pt-ds-pt-dn-ft-se,
737
- var(--_ctm-tab-dn-pt-ds-pt-dn-ft-se, var(--_ctm-dn-pt-ds-pt-dn-ft-se))
738
- );
739
- font-weight: var(
740
- --_ctm-mob-dn-pt-ds-pt-dn-ft-wt,
741
- var(--_ctm-tab-dn-pt-ds-pt-dn-ft-wt, var(--_ctm-dn-pt-ds-pt-dn-ft-wt))
742
- );
743
- color: var(
744
- --_ctm-mob-dn-pt-ds-pt-dn-cr,
745
- var(--_ctm-tab-dn-pt-ds-pt-dn-cr, var(--_ctm-dn-pt-ds-pt-dn-cr))
746
- );
747
- line-height: var(
748
- --_ctm-mob-dn-pt-ds-pt-dn-le-ht,
749
- var(--_ctm-tab-dn-pt-ds-pt-dn-le-ht, var(--_ctm-dn-pt-ds-pt-dn-le-ht))
750
- );
751
- letter-spacing: var(
752
- --_ctm-mob-dn-pt-ds-pt-dn-lr-sg,
753
- var(--_ctm-tab-dn-pt-ds-pt-dn-lr-sg, var(--_ctm-dn-pt-ds-pt-dn-lr-sg))
754
- );
755
- // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
756
- // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
757
- padding: var(
758
- --_ctm-dn-mob-pt-ds-pt-dn-pg,
759
- var(--_ctm-tab-dn-pt-ds-pt-dn-pg, var(--_ctm-dn-pt-ds-pt-dn-pg))
760
- );
761
- }
762
- }
763
-
764
- // .product_qty_wrapper {
765
- // display: flex;
766
- // // width: 124px;
767
- // flex-direction: column;
768
- // align-items: flex-start;
769
- // gap: 6px;
770
- // width: 120px;
771
-
772
- // .product_qty_container {
773
- // display: flex;
774
- // align-items: flex-start;
775
- // align-self: stretch;
776
- // border-radius: 4px;
777
- // border: 0.5px solid #d0d5dd;
778
- // background: #fff;
779
- // box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
780
-
781
- // .product_qty_label {
782
- // display: flex;
783
- // padding: 8px 12px;
784
- // align-items: center;
785
- // border-radius: 8px 0px 0px 8px;
786
- // p {
787
- // color: #475467;
788
- // font-size: 16px;
789
- // font-weight: 400;
790
- // line-height: 24px;
791
- // }
792
- // }
793
-
794
- // .product_qty_number {
795
- // display: flex;
796
- // padding: 8px 12px;
797
- // align-items: center;
798
- // gap: 8px;
799
- // flex: 1 0 0;
800
- // align-self: stretch;
801
- // border-radius: 0px 4px 4px 0px;
802
- // background: #fff;
803
- // border-left: 1px solid #d0d5dd;
804
- // max-width: 80px;
805
- // text-align: center;
806
- // &::-webkit-outer-spin-button,
807
- // &::-webkit-inner-spin-button {
808
- // -webkit-appearance: none;
809
- // margin: 0;
810
- // }
811
- // }
812
- // }
813
- // }
814
- .denominations_container {
815
- // font-size: 16px;
816
- display: flex;
817
- flex-direction: column;
818
- // gap: 6px;
819
- // padding-bottom: 14px;
820
-
821
- background-color: var(
822
- --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-bd-cr,
823
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-bd-cr))
824
- );
825
- border-color: var(
826
- --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-cr,
827
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-cr))
828
- );
829
- border-radius: var(
830
- --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-rs,
831
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-rs, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-rs))
832
- );
833
- border-style: var(
834
- --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-se,
835
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-se, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-se))
836
- );
837
- border-width: var(
838
- --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-wh,
839
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-wh, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-wh))
840
- );
841
- box-shadow: var(
842
- --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-ae,
843
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-ae, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-ae))
844
- )
845
- var(
846
- --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-br,
847
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-br, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-br))
848
- )
849
- var(
850
- --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-sd,
851
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-sd, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-sd))
852
- )
853
- var(
854
- --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-cr,
855
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-cr))
856
- );
857
- padding: var(
858
- --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-pg,
859
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-pg, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-pg))
860
- );
861
- gap: var(
862
- --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-im-gp,
863
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-im-gp, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-im-gp))
864
- );
865
- .denominations_title {
866
- // margin-bottom: 4px;
867
- // font-size: 16px;
868
- // color: #000000;
869
- // font-weight: 500;
870
- // line-height: 150%;
871
- font-family: var(
872
- --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-fy,
873
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-fy))
874
- );
875
- text-transform: var(
876
- --_ctm-mob-dn-pt-ds-gt-cd-ts-tt-tm,
877
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-ts-tt-tm))
878
- );
879
- word-wrap: var(
880
- --_ctm-mob-dn-pt-ds-gt-cd-ts-wd-wp,
881
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-ts-wd-wp))
882
- );
883
- word-break: var(
884
- --_ctm-mob-dn-pt-ds-gt-cd-ts-wd-bk,
885
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-ts-wd-bk))
886
- );
887
- color: var(
888
- --_ctm-mob-dn-pt-ds-gt-cd-ts-cr,
889
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-cr, var(--_ctm-dn-pt-ds-gt-cd-ts-cr))
890
- );
891
- font-weight: var(
892
- --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-wt,
893
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-wt))
894
- );
895
- font-size: var(
896
- --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se,
897
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se))
898
- );
899
- text-decoration: var(
900
- --_ctm-mob-dn-pt-ds-gt-cd-ts-ue,
901
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ue, var(--_ctm-dn-pt-ds-gt-cd-ts-ue))
902
- );
903
- letter-spacing: var(
904
- --_ctm-mob-dn-pt-ds-gt-cd-ts-lr-sg,
905
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ts-lr-sg))
906
- );
907
- line-height: var(
908
- --_ctm-mob-dn-pt-ds-gt-cd-ts-le-ht,
909
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ts-le-ht))
910
- );
911
- font-style: var(
912
- --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se-ic,
913
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se-ic))
914
- );
915
- text-align: var(
916
- --_ctm-mob-dn-pt-ds-gt-cd-ts-tt-an,
917
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ts-tt-an))
918
- );
919
- }
920
- .denominations_grid {
921
- display: flex;
922
- // gap: 8px;
923
- flex-wrap: wrap;
924
- margin-top: 12px;
925
- flex-direction: row;
926
- gap: 12px;
927
- // gap: var(
928
- // --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-im-gp,
929
- // var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-im-gp, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-im-gp))
930
- // );
931
- .amount_btn {
932
- transition: color 0.3s ease;
933
- cursor: pointer;
934
- display: flex;
935
- align-items: center;
936
- justify-content: center;
937
- // padding: 4px;
938
- min-width: 20px;
939
- min-height: 20px;
940
- box-sizing: content-box;
941
- // font-size: 16px;
942
- // font-weight: 600;
943
- // line-height: 150%;
944
- // background-color: #ffffff;
945
- // border: 1px solid #d6d6d6;
946
- background-color: var(
947
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-bd-cr,
948
- var(
949
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-bd-cr,
950
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-bd-cr)
951
- )
952
- );
953
- font-family: var(
954
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-fy,
955
- var(
956
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-fy,
957
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-fy)
958
- )
959
- );
960
- text-transform: var(
961
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-tt-tm,
962
- var(
963
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-tt-tm,
964
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-tt-tm)
965
- )
966
- );
967
- word-wrap: var(
968
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-wd-wp,
969
- var(
970
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-wd-wp,
971
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-wd-wp)
972
- )
973
- );
974
- word-break: var(
975
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-wd-bk,
976
- var(
977
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-wd-bk,
978
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-wd-bk)
979
- )
980
- );
981
- &.flex__overflow {
982
- white-space: normal;
983
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
984
- }
985
- color: var(
986
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-cr,
987
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-cr))
988
- );
989
- font-weight: var(
990
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-wt,
991
- var(
992
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-wt,
993
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-wt)
994
- )
995
- );
996
- font-size: var(
997
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-se,
998
- var(
999
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-se,
1000
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-se)
1001
- )
1002
- );
1003
- text-decoration: var(
1004
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ue,
1005
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ue, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ue))
1006
- );
1007
- letter-spacing: var(
1008
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-lr-sg,
1009
- var(
1010
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-lr-sg,
1011
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-lr-sg)
1012
- )
1013
- );
1014
- line-height: var(
1015
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-le-ht,
1016
- var(
1017
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-le-ht,
1018
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-le-ht)
1019
- )
1020
- );
1021
- font-style: var(
1022
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-se-ic,
1023
- var(
1024
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-se-ic,
1025
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-se-ic)
1026
- )
1027
- );
1028
- text-align: var(
1029
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-tt-an,
1030
- var(
1031
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-tt-an,
1032
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-tt-an)
1033
- )
1034
- );
1035
- border-color: var(
1036
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-cr,
1037
- var(
1038
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-cr,
1039
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-cr)
1040
- )
1041
- );
1042
- border-radius: var(
1043
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-rs,
1044
- var(
1045
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-rs,
1046
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-rs)
1047
- )
1048
- );
1049
- border-style: var(
1050
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-se,
1051
- var(
1052
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-se,
1053
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-se)
1054
- )
1055
- );
1056
- border-width: var(
1057
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-wh,
1058
- var(
1059
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-wh,
1060
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-wh)
1061
- )
1062
- );
1063
- box-shadow: var(
1064
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-ae,
1065
- var(
1066
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-ae,
1067
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-ae)
1068
- )
1069
- )
1070
- var(
1071
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-br,
1072
- var(
1073
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-br,
1074
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-br)
1075
- )
1076
- )
1077
- var(
1078
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-sd,
1079
- var(
1080
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-sd,
1081
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-sd)
1082
- )
1083
- )
1084
- var(
1085
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-cr,
1086
- var(
1087
- --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-cr,
1088
- var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-cr)
1089
- )
1090
- );
1091
- padding: var(
1092
- --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-pg,
1093
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-pg, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-pg))
1094
- );
1095
- &.active {
1096
- background-color: var(
1097
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-bd-cr,
1098
- var(
1099
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-bd-cr,
1100
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-bd-cr)
1101
- )
1102
- );
1103
- font-family: var(
1104
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-fy,
1105
- var(
1106
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-fy,
1107
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-fy)
1108
- )
1109
- );
1110
- text-transform: var(
1111
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-tt-tm,
1112
- var(
1113
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-tt-tm,
1114
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-tt-tm)
1115
- )
1116
- );
1117
- word-wrap: var(
1118
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-wd-wp,
1119
- var(
1120
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-wd-wp,
1121
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-wd-wp)
1122
- )
1123
- );
1124
- word-break: var(
1125
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-wd-bk,
1126
- var(
1127
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-wd-bk,
1128
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-wd-bk)
1129
- )
1130
- );
1131
- color: var(
1132
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-cr,
1133
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-cr))
1134
- );
1135
- font-weight: var(
1136
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-wt,
1137
- var(
1138
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-wt,
1139
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-wt)
1140
- )
1141
- );
1142
- font-size: var(
1143
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-se,
1144
- var(
1145
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-se,
1146
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-se)
1147
- )
1148
- );
1149
- text-decoration: var(
1150
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ue,
1151
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ue, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ue))
1152
- );
1153
- letter-spacing: var(
1154
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-lr-sg,
1155
- var(
1156
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-lr-sg,
1157
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-lr-sg)
1158
- )
1159
- );
1160
- line-height: var(
1161
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-le-ht,
1162
- var(
1163
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-le-ht,
1164
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-le-ht)
1165
- )
1166
- );
1167
- font-style: var(
1168
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-se-ic,
1169
- var(
1170
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-se-ic,
1171
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-se-ic)
1172
- )
1173
- );
1174
- text-align: var(
1175
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-tt-an,
1176
- var(
1177
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-tt-an,
1178
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-tt-an)
1179
- )
1180
- );
1181
- border-color: var(
1182
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-cr,
1183
- var(
1184
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-cr,
1185
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-cr)
1186
- )
1187
- );
1188
- border-radius: var(
1189
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-rs,
1190
- var(
1191
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-rs,
1192
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-rs)
1193
- )
1194
- );
1195
- border-style: var(
1196
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-se,
1197
- var(
1198
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-se,
1199
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-se)
1200
- )
1201
- );
1202
- border-width: var(
1203
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-wh,
1204
- var(
1205
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-wh,
1206
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-wh)
1207
- )
1208
- );
1209
- box-shadow: var(
1210
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-ae,
1211
- var(
1212
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-ae,
1213
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-ae)
1214
- )
1215
- )
1216
- var(
1217
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-br,
1218
- var(
1219
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-br,
1220
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-br)
1221
- )
1222
- )
1223
- var(
1224
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-sd,
1225
- var(
1226
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-sd,
1227
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-sd)
1228
- )
1229
- )
1230
- var(
1231
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-cr,
1232
- var(
1233
- --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-cr,
1234
- var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-cr)
1235
- )
1236
- );
1237
- padding: var(
1238
- --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-pg,
1239
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-pg, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-pg))
1240
- );
1241
- // background-color: #f5f5f5;
1242
- // border: 1px solid #3e4784;
1243
- // color: #000080;
1244
- }
1245
- }
1246
- }
1247
- .custom_amount_container {
1248
- display: flex;
1249
- flex-direction: column;
1250
- gap: 8px;
1251
- .error_text {
1252
- font-size: 12px;
1253
- color: var(--_error-500);
1254
- }
1255
- .custom_amount_label {
1256
- font-family: var(
1257
- --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-fy,
1258
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-fy))
1259
- );
1260
- text-transform: var(
1261
- --_ctm-mob-dn-pt-ds-gt-cd-ls-tt-tm,
1262
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-ls-tt-tm))
1263
- );
1264
- word-wrap: var(
1265
- --_ctm-mob-dn-pt-ds-gt-cd-ls-wd-wp,
1266
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-ls-wd-wp))
1267
- );
1268
- word-break: var(
1269
- --_ctm-mob-dn-pt-ds-gt-cd-ls-wd-bk,
1270
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-ls-wd-bk))
1271
- );
1272
- color: var(
1273
- --_ctm-mob-dn-pt-ds-gt-cd-ls-cr,
1274
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-cr, var(--_ctm-dn-pt-ds-gt-cd-ls-cr))
1275
- );
1276
- font-weight: var(
1277
- --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-wt,
1278
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-wt))
1279
- );
1280
- font-size: var(
1281
- --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se,
1282
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se))
1283
- );
1284
- text-decoration: var(
1285
- --_ctm-mob-dn-pt-ds-gt-cd-ls-ue,
1286
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ue, var(--_ctm-dn-pt-ds-gt-cd-ls-ue))
1287
- );
1288
- letter-spacing: var(
1289
- --_ctm-mob-dn-pt-ds-gt-cd-ls-lr-sg,
1290
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ls-lr-sg))
1291
- );
1292
- line-height: var(
1293
- --_ctm-mob-dn-pt-ds-gt-cd-ls-le-ht,
1294
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ls-le-ht))
1295
- );
1296
- font-style: var(
1297
- --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se-ic,
1298
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se-ic))
1299
- );
1300
- text-align: var(
1301
- --_ctm-mob-dn-pt-ds-gt-cd-ls-tt-an,
1302
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ls-tt-an))
1303
- );
1304
- padding: var(
1305
- --_ctm-mob-dn-pt-ds-gt-cd-ls-pg,
1306
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-pg, var(--_ctm-dn-pt-ds-gt-cd-ls-pg))
1307
- );
1308
- }
1309
- .custom_amount_input {
1310
- height: 40px;
1311
- display: flex;
1312
- position: relative;
1313
- // gap: 6px;
1314
- align-items: center;
1315
- // border-radius: 4px;
1316
- // background: #fff;
1317
- // border: 1px solid #d0d5dd;
1318
- // padding: 8px 12px;
1319
- background-color: var(
1320
- --_ctm-mob-dn-pt-ds-gt-cd-is-bd-cr,
1321
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-is-bd-cr))
1322
- );
1323
-
1324
- border-color: var(
1325
- --_ctm-mob-dn-pt-ds-gt-cd-is-br-cr,
1326
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-dn-pt-ds-gt-cd-is-br-cr))
1327
- );
1328
- border-radius: var(
1329
- --_ctm-mob-dn-pt-ds-gt-cd-is-br-rs,
1330
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-dn-pt-ds-gt-cd-is-br-rs))
1331
- );
1332
- border-style: var(
1333
- --_ctm-mob-dn-pt-ds-gt-cd-is-br-se,
1334
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-dn-pt-ds-gt-cd-is-br-se))
1335
- );
1336
- border-width: var(
1337
- --_ctm-mob-dn-pt-ds-gt-cd-is-br-wh,
1338
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-dn-pt-ds-gt-cd-is-br-wh))
1339
- );
1340
- padding: var(
1341
- --_ctm-mob-dn-pt-ds-gt-cd-is-pg,
1342
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-pg, var(--_ctm-dn-pt-ds-gt-cd-is-pg))
1343
- );
1344
- // width: 220px;
1345
- transition:
1346
- background-color 0.2s,
1347
- color 0.2s,
1348
- border-color 0.2s,
1349
- box-shadow 0.2s;
1350
- .svg_icon {
1351
- color: var(--_gray-700);
1352
- font-weight: 500;
1353
- font-size: 14px;
1354
- line-height: 24px;
1355
- white-space: nowrap;
1356
- position: absolute;
1357
- top: 7px;
1358
- }
1359
- input {
1360
- color: var(--_gray-700);
1361
- margin-top: 2px;
1362
- &::placeholder {
1363
- font-family: var(
1364
- --_ctm-mob-dn-pt-ds-gt-cd-is-ft-fy,
1365
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-is-ft-fy))
1366
- );
1367
- text-transform: var(
1368
- --_ctm-mob-dn-pt-ds-gt-cd-is-tt-tm,
1369
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-is-tt-tm))
1370
- );
1371
- word-wrap: var(
1372
- --_ctm-mob-dn-pt-ds-gt-cd-is-wd-wp,
1373
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-is-wd-wp))
1374
- );
1375
- word-break: var(
1376
- --_ctm-mob-dn-pt-ds-gt-cd-is-wd-bk,
1377
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-is-wd-bk))
1378
- );
1379
- color: var(
1380
- --_ctm-mob-dn-pt-ds-gt-cd-is-cr,
1381
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-cr, var(--_ctm-dn-pt-ds-gt-cd-is-cr))
1382
- );
1383
- font-weight: var(
1384
- --_ctm-mob-dn-pt-ds-gt-cd-is-ft-wt,
1385
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-is-ft-wt))
1386
- );
1387
- font-size: var(
1388
- --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se,
1389
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se))
1390
- );
1391
- text-decoration: var(
1392
- --_ctm-mob-dn-pt-ds-gt-cd-is-ue,
1393
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-ue, var(--_ctm-dn-pt-ds-gt-cd-is-ue))
1394
- );
1395
- letter-spacing: var(
1396
- --_ctm-mob-dn-pt-ds-gt-cd-is-lr-sg,
1397
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-is-lr-sg))
1398
- );
1399
- line-height: var(
1400
- --_ctm-mob-dn-pt-ds-gt-cd-is-le-ht,
1401
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-dn-pt-ds-gt-cd-is-le-ht))
1402
- );
1403
- font-style: var(
1404
- --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se-ic,
1405
- var(
1406
- --_ctm-tab-dn-pt-ds-gt-cd-is-ft-se-ic,
1407
- var(--_ctm-dn-pt-ds-gt-cd-is-ft-se-ic)
1408
- )
1409
- );
1410
- text-align: var(
1411
- --_ctm-mob-dn-pt-ds-gt-cd-is-tt-an,
1412
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-dn-pt-ds-gt-cd-is-tt-an))
1413
- );
1414
- // color: var(--_gray-500);
1415
- // font-weight: 500;
1416
- // font-size: 14px;
1417
- // line-height: 24px;
1418
- }
1419
- padding-left: 24px;
1420
- }
1421
- &:focus-within {
1422
- outline: 0 none;
1423
- outline-offset: 0;
1424
- border-radius: 4px;
1425
- box-shadow:
1426
- 0px 1px 2px rgba(16, 24, 40, 0.05),
1427
- 0px 0px 0px 2px var(--_primary-100);
1428
- border: 1px solid var(--_primary-300);
1429
- }
1430
- }
1431
- }
1432
- .delivery_details_container {
1433
- display: flex;
1434
- flex-direction: column;
1435
- gap: var(
1436
- --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-im-gp,
1437
- var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-im-gp, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-im-gp))
1438
- );
1439
- .delivery_details_title {
1440
- display: inline-block;
1441
- // margin-top: 8px;
1442
- // margin-bottom: 4px;
1443
- // font-size: 16px;
1444
- // color: #000000;
1445
- // font-weight: 500;
1446
- // line-height: 150%;
1447
- font-family: var(
1448
- --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-fy,
1449
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-fy))
1450
- );
1451
- text-transform: var(
1452
- --_ctm-mob-dn-pt-ds-gt-cd-ts-tt-tm,
1453
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-ts-tt-tm))
1454
- );
1455
- word-wrap: var(
1456
- --_ctm-mob-dn-pt-ds-gt-cd-ts-wd-wp,
1457
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-ts-wd-wp))
1458
- );
1459
- word-break: var(
1460
- --_ctm-mob-dn-pt-ds-gt-cd-ts-wd-bk,
1461
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-ts-wd-bk))
1462
- );
1463
- &.flex__overflow {
1464
- white-space: normal;
1465
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1466
- }
1467
- color: var(
1468
- --_ctm-mob-dn-pt-ds-gt-cd-ts-cr,
1469
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-cr, var(--_ctm-dn-pt-ds-gt-cd-ts-cr))
1470
- );
1471
- font-weight: var(
1472
- --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-wt,
1473
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-wt))
1474
- );
1475
- font-size: var(
1476
- --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se,
1477
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se))
1478
- );
1479
- text-decoration: var(
1480
- --_ctm-mob-dn-pt-ds-gt-cd-ts-ue,
1481
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ue, var(--_ctm-dn-pt-ds-gt-cd-ts-ue))
1482
- );
1483
- letter-spacing: var(
1484
- --_ctm-mob-dn-pt-ds-gt-cd-ts-lr-sg,
1485
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ts-lr-sg))
1486
- );
1487
- line-height: var(
1488
- --_ctm-mob-dn-pt-ds-gt-cd-ts-le-ht,
1489
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ts-le-ht))
1490
- );
1491
- font-style: var(
1492
- --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se-ic,
1493
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se-ic))
1494
- );
1495
- text-align: var(
1496
- --_ctm-mob-dn-pt-ds-gt-cd-ts-tt-an,
1497
- var(--_ctm-tab-dn-pt-ds-gt-cd-ts-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ts-tt-an))
1498
- );
1499
- }
1500
- .horizontal_line {
1501
- // border: 1px solid #d0d5dd;
1502
- // display: block;
1503
- // width: 100%;
1504
- // border-style: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-se);
1505
- // border-color: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-cr);
1506
- // border-width: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-wh);
1507
- border-top: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-wh) var(--_ctm-dn-pt-ds-gt-cd-dr-dr-se)
1508
- var(--_ctm-dn-pt-ds-gt-cd-dr-dr-cr);
1509
- }
1510
- .input_container {
1511
- display: flex;
1512
- flex-direction: column;
1513
- gap: 4px;
1514
- // margin-bottom: 12px;
1515
-
1516
- &:last-child {
1517
- margin-bottom: 0;
1518
- }
1519
- label {
1520
- display: block;
1521
- font-family: var(
1522
- --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-fy,
1523
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-fy))
1524
- );
1525
- text-transform: var(
1526
- --_ctm-mob-dn-pt-ds-gt-cd-ls-tt-tm,
1527
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-ls-tt-tm))
1528
- );
1529
- word-wrap: var(
1530
- --_ctm-mob-dn-pt-ds-gt-cd-ls-wd-wp,
1531
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-ls-wd-wp))
1532
- );
1533
- word-break: var(
1534
- --_ctm-mob-dn-pt-ds-gt-cd-ls-wd-bk,
1535
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-ls-wd-bk))
1536
- );
1537
- &.flex__overflow {
1538
- white-space: normal;
1539
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1540
- }
1541
- color: var(
1542
- --_ctm-mob-dn-pt-ds-gt-cd-ls-cr,
1543
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-cr, var(--_ctm-dn-pt-ds-gt-cd-ls-cr))
1544
- );
1545
- font-weight: var(
1546
- --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-wt,
1547
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-wt))
1548
- );
1549
- font-size: var(
1550
- --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se,
1551
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se))
1552
- );
1553
- text-decoration: var(
1554
- --_ctm-mob-dn-pt-ds-gt-cd-ls-ue,
1555
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ue, var(--_ctm-dn-pt-ds-gt-cd-ls-ue))
1556
- );
1557
- letter-spacing: var(
1558
- --_ctm-mob-dn-pt-ds-gt-cd-ls-lr-sg,
1559
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ls-lr-sg))
1560
- );
1561
- line-height: var(
1562
- --_ctm-mob-dn-pt-ds-gt-cd-ls-le-ht,
1563
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ls-le-ht))
1564
- );
1565
- font-style: var(
1566
- --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se-ic,
1567
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se-ic))
1568
- );
1569
- text-align: var(
1570
- --_ctm-mob-dn-pt-ds-gt-cd-ls-tt-an,
1571
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ls-tt-an))
1572
- );
1573
- padding: var(
1574
- --_ctm-mob-dn-pt-ds-gt-cd-ls-pg,
1575
- var(--_ctm-tab-dn-pt-ds-gt-cd-ls-pg, var(--_ctm-dn-pt-ds-gt-cd-ls-pg))
1576
- );
1577
- // color: var(--_gray-700);
1578
- // font-weight: 400;
1579
- // font-size: 14px;
1580
- // line-height: 20px;
1581
- }
1582
- .message_text {
1583
- resize: none;
1584
- // background-color: var(--_base-white);
1585
- // padding: 5px 12px;
1586
- // border: 1px solid var(--_gray-300);
1587
- // border-radius: 4px;
1588
- background-color: var(
1589
- --_ctm-mob-dn-pt-ds-gt-cd-is-bd-cr,
1590
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-is-bd-cr))
1591
- );
1592
-
1593
- border-color: var(
1594
- --_ctm-mob-dn-pt-ds-gt-cd-is-br-cr,
1595
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-dn-pt-ds-gt-cd-is-br-cr))
1596
- );
1597
- border-radius: var(
1598
- --_ctm-mob-dn-pt-ds-gt-cd-is-br-rs,
1599
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-dn-pt-ds-gt-cd-is-br-rs))
1600
- );
1601
- border-style: var(
1602
- --_ctm-mob-dn-pt-ds-gt-cd-is-br-se,
1603
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-dn-pt-ds-gt-cd-is-br-se))
1604
- );
1605
- border-width: var(
1606
- --_ctm-mob-dn-pt-ds-gt-cd-is-br-wh,
1607
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-dn-pt-ds-gt-cd-is-br-wh))
1608
- );
1609
- padding: var(
1610
- --_ctm-mob-dn-pt-ds-gt-cd-is-pg,
1611
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-pg, var(--_ctm-dn-pt-ds-gt-cd-is-pg))
1612
- );
1613
- // margin-bottom: 8px;
1614
- transition:
1615
- background-color 0.2s,
1616
- color 0.2s,
1617
- border-color 0.2s,
1618
- box-shadow 0.2s;
1619
- height: 90px;
1620
- &::placeholder {
1621
- // color: var(--_gray-500);
1622
- // font-weight: 500;
1623
- // font-size: 14px;
1624
- // line-height: 24px;
1625
- font-family: var(
1626
- --_ctm-mob-dn-pt-ds-gt-cd-is-ft-fy,
1627
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-is-ft-fy))
1628
- );
1629
- text-transform: var(
1630
- --_ctm-mob-dn-pt-ds-gt-cd-is-tt-tm,
1631
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-is-tt-tm))
1632
- );
1633
- word-wrap: var(
1634
- --_ctm-mob-dn-pt-ds-gt-cd-is-wd-wp,
1635
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-is-wd-wp))
1636
- );
1637
- word-break: var(
1638
- --_ctm-mob-dn-pt-ds-gt-cd-is-wd-bk,
1639
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-is-wd-bk))
1640
- );
1641
- color: var(
1642
- --_ctm-mob-dn-pt-ds-gt-cd-is-cr,
1643
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-cr, var(--_ctm-dn-pt-ds-gt-cd-is-cr))
1644
- );
1645
- font-weight: var(
1646
- --_ctm-mob-dn-pt-ds-gt-cd-is-ft-wt,
1647
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-is-ft-wt))
1648
- );
1649
- font-size: var(
1650
- --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se,
1651
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se))
1652
- );
1653
- text-decoration: var(
1654
- --_ctm-mob-dn-pt-ds-gt-cd-is-ue,
1655
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-ue, var(--_ctm-dn-pt-ds-gt-cd-is-ue))
1656
- );
1657
- letter-spacing: var(
1658
- --_ctm-mob-dn-pt-ds-gt-cd-is-lr-sg,
1659
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-is-lr-sg))
1660
- );
1661
- line-height: var(
1662
- --_ctm-mob-dn-pt-ds-gt-cd-is-le-ht,
1663
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-dn-pt-ds-gt-cd-is-le-ht))
1664
- );
1665
- font-style: var(
1666
- --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se-ic,
1667
- var(
1668
- --_ctm-tab-dn-pt-ds-gt-cd-is-ft-se-ic,
1669
- var(--_ctm-dn-pt-ds-gt-cd-is-ft-se-ic)
1670
- )
1671
- );
1672
- text-align: var(
1673
- --_ctm-mob-dn-pt-ds-gt-cd-is-tt-an,
1674
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-dn-pt-ds-gt-cd-is-tt-an))
1675
- );
1676
- }
1677
- &:focus {
1678
- outline: 0 none;
1679
- outline-offset: 0;
1680
- border-radius: 4px;
1681
- box-shadow:
1682
- 0px 1px 2px rgba(16, 24, 40, 0.05),
1683
- 0px 0px 0px 2px var(--_primary-100);
1684
- border: 1px solid var(--_primary-300);
1685
- }
1686
- }
1687
- input {
1688
- // background-color: var(--_base-white);
1689
- // padding: 8px 12px;
1690
- // border: 1px solid var(--_gray-300);
1691
- // border-radius: 4px;
1692
- background-color: var(
1693
- --_ctm-mob-dn-pt-ds-gt-cd-is-bd-cr,
1694
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-is-bd-cr))
1695
- );
1696
-
1697
- border-color: var(
1698
- --_ctm-mob-dn-pt-ds-gt-cd-is-br-cr,
1699
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-dn-pt-ds-gt-cd-is-br-cr))
1700
- );
1701
- border-radius: var(
1702
- --_ctm-mob-dn-pt-ds-gt-cd-is-br-rs,
1703
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-dn-pt-ds-gt-cd-is-br-rs))
1704
- );
1705
- border-style: var(
1706
- --_ctm-mob-dn-pt-ds-gt-cd-is-br-se,
1707
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-dn-pt-ds-gt-cd-is-br-se))
1708
- );
1709
- border-width: var(
1710
- --_ctm-mob-dn-pt-ds-gt-cd-is-br-wh,
1711
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-dn-pt-ds-gt-cd-is-br-wh))
1712
- );
1713
- // padding: var(
1714
- // --_ctm-mob-dn-pt-ds-gt-cd-is-pg,
1715
- // var(--_ctm-tab-dn-pt-ds-gt-cd-is-pg, var(--_ctm-dn-pt-ds-gt-cd-is-pg))
1716
- // );
1717
- padding: 10px 12px 12px 12px;
1718
-
1719
- transition:
1720
- background-color 0.2s,
1721
- color 0.2s,
1722
- border-color 0.2s,
1723
- box-shadow 0.2s;
1724
- &::placeholder {
1725
- // color: var(--_gray-500);
1726
- // font-weight: 500;
1727
- // font-size: 14px;
1728
- // line-height: 24px;
1729
- font-family: var(
1730
- --_ctm-mob-dn-pt-ds-gt-cd-is-ft-fy,
1731
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-is-ft-fy))
1732
- );
1733
- text-transform: var(
1734
- --_ctm-mob-dn-pt-ds-gt-cd-is-tt-tm,
1735
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-is-tt-tm))
1736
- );
1737
- word-wrap: var(
1738
- --_ctm-mob-dn-pt-ds-gt-cd-is-wd-wp,
1739
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-is-wd-wp))
1740
- );
1741
- word-break: var(
1742
- --_ctm-mob-dn-pt-ds-gt-cd-is-wd-bk,
1743
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-is-wd-bk))
1744
- );
1745
- color: var(
1746
- --_ctm-mob-dn-pt-ds-gt-cd-is-cr,
1747
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-cr, var(--_ctm-dn-pt-ds-gt-cd-is-cr))
1748
- );
1749
- font-weight: var(
1750
- --_ctm-mob-dn-pt-ds-gt-cd-is-ft-wt,
1751
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-is-ft-wt))
1752
- );
1753
- font-size: var(
1754
- --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se,
1755
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se))
1756
- );
1757
- text-decoration: var(
1758
- --_ctm-mob-dn-pt-ds-gt-cd-is-ue,
1759
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-ue, var(--_ctm-dn-pt-ds-gt-cd-is-ue))
1760
- );
1761
- letter-spacing: var(
1762
- --_ctm-mob-dn-pt-ds-gt-cd-is-lr-sg,
1763
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-is-lr-sg))
1764
- );
1765
- line-height: var(
1766
- --_ctm-mob-dn-pt-ds-gt-cd-is-le-ht,
1767
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-dn-pt-ds-gt-cd-is-le-ht))
1768
- );
1769
- font-style: var(
1770
- --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se-ic,
1771
- var(
1772
- --_ctm-tab-dn-pt-ds-gt-cd-is-ft-se-ic,
1773
- var(--_ctm-dn-pt-ds-gt-cd-is-ft-se-ic)
1774
- )
1775
- );
1776
- text-align: var(
1777
- --_ctm-mob-dn-pt-ds-gt-cd-is-tt-an,
1778
- var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-dn-pt-ds-gt-cd-is-tt-an))
1779
- );
1780
- }
1781
- &:focus {
1782
- outline: 0 none;
1783
- outline-offset: 0;
1784
- border-radius: 4px;
1785
- box-shadow:
1786
- 0px 1px 2px rgba(16, 24, 40, 0.05),
1787
- 0px 0px 0px 2px var(--_primary-100);
1788
- border: 1px solid var(--_primary-300);
1789
- }
1790
- }
1791
- .error_text {
1792
- font-size: 12px;
1793
- color: var(--_error-500);
1794
- }
1795
- }
1796
- }
1797
- }
1798
- .product_qty_wrapper {
1799
- display: flex;
1800
- // width: 124px;
1801
- flex-direction: column;
1802
- align-items: flex-start;
1803
- gap: 6px;
1804
- width: 113px;
1805
- margin-block: 12px;
1806
-
1807
- .product_qty_container {
1808
- display: flex;
1809
- align-items: flex-start;
1810
- align-self: stretch;
1811
- border-radius: 4px;
1812
- border: 0.5px solid var(--_thm-cs-be-se-3);
1813
- background: #fff;
1814
- box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
1815
- &:focus-within {
1816
- outline: 2px solid var(--_gray-200);
1817
- }
1818
-
1819
- .product_qty_label {
1820
- display: flex;
1821
- padding: 8px 12px;
1822
- align-items: center;
1823
- border-radius: 8px 0px 0px 8px;
1824
- p {
1825
- color: var(--_thm-ty-p1-tt-cr);
1826
- font-size: var(--_thm-ty-p1-ft-se);
1827
- font-weight: var(--_thm-ty-p1-bd);
1828
- // line-height: 24px;
1829
- line-height: var(--_thm-ty-p1-le-ht);
1830
- }
1831
- }
1832
- .product_qty_input_container {
1833
- height: 40px;
1834
- display: flex;
1835
- // position: relative;
1836
- width: 55px;
1837
- border-radius: 0px 4px 4px 0px;
1838
- background: transparent;
1839
- border-left: 1px solid var(--_thm-cs-be-se-3);
1840
- padding: 8px 12px;
1841
- }
1842
- .product_qty_number {
1843
- // display: flex;
1844
- // padding: 8px 12px;
1845
- align-items: center;
1846
- color: var(--_thm-ty-p2-tt-cr);
1847
- font-size: var(--_thm-ty-p1-ft-se);
1848
- font-weight: var(--_thm-ty-p1-bd);
1849
- line-height: var(--_thm-ty-p1-le-ht);
1850
- // gap: 8px;
1851
- // flex: 1 0 0;
1852
- // align-self: stretch;
1853
- // border-radius: 0px 4px 4px 0px;
1854
- // background: #fff;
1855
- // border-left: 1px solid #d0d5dd;
1856
- // max-width: 80px;
1857
- text-align: center;
1858
- width: 75%;
1859
- &::-webkit-outer-spin-button,
1860
- &::-webkit-inner-spin-button {
1861
- -webkit-appearance: none;
1862
- margin: 0;
1863
- }
1864
- }
1865
- }
1866
- }
1867
- .add-to-cart {
1868
- padding-top: 12px;
1869
- padding-right: 24px;
1870
- padding-bottom: 12px;
1871
- padding-left: 24px;
1872
- transition: background 200ms ease-in-out;
1873
- span {
1874
- display: flex;
1875
- svg path {
1876
- stroke: var(--_base-white);
1877
- }
1878
- }
1879
- // padding: var(
1880
- // --_ctm-mob-dn-pt-ds-at-pg,
1881
- // var(--_ctm-tab-dn-pt-ds-at-pg, var(--_ctm-dn-pt-ds-at-pg))
1882
- // );
1883
- // border-style: var(
1884
- // --_ctm-mob-dn-pt-ds-at-br-se,
1885
- // var(--_ctm-tab-dn-pt-ds-at-br-se, var(--_ctm-dn-pt-ds-at-br-se))
1886
- // );
1887
- // border-width: var(
1888
- // --_ctm-mob-dn-pt-ds-at-br-wh,
1889
- // var(--_ctm-tab-dn-pt-ds-at-br-wh, var(--_ctm-dn-pt-ds-at-br-wh))
1890
- // );
1891
- // border-radius: var(
1892
- // --_ctm-mob-dn-pt-ds-at-br-rs,
1893
- // var(--_ctm-tab-dn-pt-ds-at-br-rs, var(--_ctm-dn-pt-ds-at-br-rs))
1894
- // );
1895
- // border-color: var(
1896
- // --_ctm-mob-dn-pt-ds-at-br-cr,
1897
- // var(--_ctm-tab-dn-pt-ds-at-br-cr, var(--_ctm-dn-pt-ds-at-br-cr))
1898
- // );
1899
- // background: var(
1900
- // --_ctm-mob-dn-pt-ds-at-bd-cr,
1901
- // var(--_ctm-tab-dn-pt-ds-at-bd-cr, var(--_ctm-dn-pt-ds-at-bd-cr))
1902
- // );
1903
- // box-shadow: 0px 1px 2px 0px #1018280d;
1904
- // text-align: center;
1905
- // font-family: var(
1906
- // --_ctm-mob-dn-pt-ds-at-ft-fy,
1907
- // var(--_ctm-tab-dn-pt-ds-at-ft-fy, var(--_ctm-dn-pt-ds-at-ft-fy))
1908
- // );
1909
- // font-weight: var(
1910
- // --_ctm-mob-dn-pt-ds-at-ft-wt,
1911
- // var(--_ctm-tab-dn-pt-ds-at-ft-wt, var(--_ctm-dn-pt-ds-at-ft-wt))
1912
- // );
1913
- // font-size: var(
1914
- // --_ctm-mob-dn-pt-ds-at-ft-se,
1915
- // var(--_ctm-tab-dn-pt-ds-at-ft-se, var(--_ctm-dn-pt-ds-at-ft-se))
1916
- // );
1917
- // line-height: var(
1918
- // --_ctm-mob-dn-pt-ds-at-le-ht,
1919
- // var(--_ctm-tab-dn-pt-ds-at-le-ht, var(--_ctm-dn-pt-ds-at-le-ht))
1920
- // );
1921
- // letter-spacing: var(
1922
- // --_ctm-mob-dn-pt-ds-at-lr-sg,
1923
- // var(--_ctm-tab-dn-pt-ds-at-lr-sg, var(--_ctm-dn-pt-ds-at-lr-sg))
1924
- // );
1925
- // color: var(
1926
- // --_ctm-mob-dn-pt-ds-at-cr,
1927
- // var(--_ctm-tab-dn-pt-ds-at-cr, var(--_ctm-dn-pt-ds-at-cr))
1928
- // );
1929
- // span {
1930
- // vertical-align: middle;
1931
- // }
1932
- // button {
1933
- // font-family: var(
1934
- // --_ctm-mob-dn-pt-ds-at-ft-fy,
1935
- // var(--_ctm-tab-dn-pt-ds-at-ft-fy, var(--_ctm-dn-pt-ds-at-ft-fy))
1936
- // );
1937
- // font-weight: var(
1938
- // --_ctm-mob-dn-pt-ds-at-ft-wt,
1939
- // var(--_ctm-tab-dn-pt-ds-at-ft-wt, var(--_ctm-dn-pt-ds-at-ft-wt))
1940
- // );
1941
- // font-size: var(
1942
- // --_ctm-mob-dn-pt-ds-at-ft-se,
1943
- // var(--_ctm-tab-dn-pt-ds-at-ft-se, var(--_ctm-dn-pt-ds-at-ft-se))
1944
- // );
1945
- // line-height: var(
1946
- // --_ctm-mob-dn-pt-ds-at-le-ht,
1947
- // var(--_ctm-tab-dn-pt-ds-at-le-ht, var(--_ctm-dn-pt-ds-at-le-ht))
1948
- // );
1949
- // letter-spacing: var(
1950
- // --_ctm-mob-dn-pt-ds-at-lr-sg,
1951
- // var(--_ctm-tab-dn-pt-ds-at-lr-sg, var(--_ctm-dn-pt-ds-at-lr-sg))
1952
- // );
1953
- // color: var(
1954
- // --_ctm-mob-dn-pt-ds-at-cr,
1955
- // var(--_ctm-tab-dn-pt-ds-at-cr, var(--_ctm-dn-pt-ds-at-cr))
1956
- // );
1957
- // }
1958
- }
1959
- }
1960
-
1961
- @media (max-width: 768px) {
1962
- grid-template-columns: 1fr;
1963
- .customizer-panel {
1964
- border-left: none;
1965
- padding-left: 0;
1966
- margin-top: 2rem;
1967
- }
1968
- }
1969
- }
1970
-
1971
- .embla {
1972
- width: 100%;
1973
- height: 100%;
1974
- position: relative;
1975
- display: flex;
1976
- flex-direction: column;
1977
- // padding: 20px;
1978
- // overflow: hidden;
1979
-
1980
- .embla__viewport {
1981
- width: 100%;
1982
- height: 100%;
1983
- position: relative;
1984
- display: flex;
1985
- flex-direction: column;
1986
-
1987
- overflow: hidden;
1988
-
1989
- .embla__container {
1990
- width: 100%;
1991
- height: 100%;
1992
- display: grid;
1993
- grid-template-rows: 100%;
1994
-
1995
- grid-template-columns: repeat(
1996
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
1997
- calc(
1998
- 100% /
1999
- var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
2000
- )
2001
- );
2002
-
2003
- grid-auto-flow: column;
2004
- gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
2005
-
2006
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
2007
- height: calc(100% - calc(50px + 10px));
2008
- }
2009
-
2010
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
2011
- height: calc(100% - calc(50px + 20px));
2012
- }
2013
-
2014
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
2015
- height: calc(
2016
- 100% - calc(
2017
- var(
2018
- --_ctm-mob-dn-pn-ds-dt-se,
2019
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2020
- ) +
2021
- 20px
2022
- )
2023
- );
2024
- }
2025
-
2026
- .embla__slide {
2027
- width: 100%;
2028
- height: 100%;
2029
- & > img {
2030
- width: 100%;
2031
- height: 100%;
2032
- object-fit: contain;
2033
- }
2034
- }
2035
- }
2036
- }
2037
- &:not([data-display-style="Column"]) {
2038
- .embla__container {
2039
- grid-auto-columns: calc(
2040
- 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
2041
- );
2042
- }
2043
- }
2044
-
2045
- .arrow-navigation {
2046
- display: flex;
2047
- position: absolute;
2048
- top: 50%;
2049
- left: 50%;
2050
- width: 100%;
2051
- justify-content: space-between;
2052
- transform: translate(-50%, -50%);
2053
- // padding-left: 20px;
2054
-
2055
- &[data-control-type="Bottom-Overflow"] {
2056
- transform: translateX(-50%);
2057
- width: 100%;
2058
- justify-content: center;
2059
- gap: 12px;
2060
- top: unset;
2061
- bottom: 6px;
2062
- }
2063
- &[data-control-type="Bottom"] {
2064
- transform: unset;
2065
- position: static;
2066
- width: 100%;
2067
- justify-content: center;
2068
- gap: 12px;
2069
- margin-top: 10px;
2070
- }
2071
- }
2072
- &[data-control-type="Side"] {
2073
- .left-button,
2074
- .right-button {
2075
- background-color: transparent;
2076
- }
2077
- }
2078
- &[data-background-shape="Round"] {
2079
- .left-button,
2080
- .right-button {
2081
- background-color: #f2f5f5;
2082
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
2083
- }
2084
- }
2085
- .left-button {
2086
- padding: 10px;
2087
- border-radius: 50%;
2088
- border: none;
2089
- width: var(
2090
- --_ctm-mob-dn-pn-as-aw-se,
2091
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2092
- );
2093
- height: var(
2094
- --_ctm-mob-dn-pn-as-aw-se,
2095
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2096
- );
2097
-
2098
- display: flex;
2099
- align-items: center;
2100
- justify-content: center;
2101
- cursor: pointer;
2102
- outline: none;
2103
- margin-left: 12px;
2104
- &:disabled {
2105
- & svg {
2106
- path {
2107
- stroke: #c3b7b7;
2108
- }
2109
- }
2110
- }
2111
- }
2112
- .right-button {
2113
- border-radius: 50%;
2114
- border: none;
2115
- width: var(
2116
- --_ctm-mob-dn-pn-as-aw-se,
2117
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2118
- );
2119
- height: var(
2120
- --_ctm-mob-dn-pn-as-aw-se,
2121
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2122
- );
2123
-
2124
- display: flex;
2125
- align-items: center;
2126
- justify-content: center;
2127
- cursor: pointer;
2128
- outline: none;
2129
- margin-right: 12px;
2130
- padding: 10px;
2131
-
2132
- &:disabled {
2133
- & svg {
2134
- path {
2135
- stroke: #c3b7b7;
2136
- }
2137
- }
2138
- }
2139
- }
2140
- .icon {
2141
- display: flex;
2142
-
2143
- svg {
2144
- width: calc(
2145
- var(
2146
- --_ctm-mob-dn-pn-as-aw-se,
2147
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2148
- ) *
2149
- 0.5
2150
- );
2151
- height: calc(
2152
- var(
2153
- --_ctm-mob-dn-pn-as-aw-se,
2154
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2155
- ) *
2156
- 0.5
2157
- );
2158
-
2159
- path {
2160
- stroke: #514949;
2161
- }
2162
- }
2163
- }
2164
-
2165
- &[data-control-type="Side"] {
2166
- .embla__viewport {
2167
- width: calc(100% - 120px);
2168
- margin-inline: auto;
2169
- }
2170
- .left-button {
2171
- position: absolute;
2172
- left: 0;
2173
- top: 50%;
2174
- transform: translateY(-50%);
2175
- }
2176
- .right-button {
2177
- position: absolute;
2178
-
2179
- right: 0;
2180
- top: 50%;
2181
- transform: translateY(-50%);
2182
- }
2183
- }
2184
-
2185
- &[data-thumbnail-placement="top"] {
2186
- flex-direction: column-reverse;
2187
- }
2188
- &[data-thumbnail-placement="bottom"] {
2189
- flex-direction: column;
2190
- }
2191
- &[data-thumbnail-placement="left"] {
2192
- flex-direction: row-reverse;
2193
-
2194
- .embla__thumbs {
2195
- width: var(--_ctm-lt-tl-se);
2196
- height: 100%;
2197
-
2198
- & .embla__thumbs__container {
2199
- flex-direction: column;
2200
- height: 100%;
2201
- }
2202
- }
2203
- }
2204
- &[data-thumbnail-placement="right"] {
2205
- flex-direction: row;
2206
- .embla__thumbs {
2207
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2208
-
2209
- height: 100%;
2210
-
2211
- & .embla__thumbs__container {
2212
- flex-direction: column;
2213
- height: 100%;
2214
- }
2215
- }
2216
- }
2217
- .embla__dots {
2218
- display: flex;
2219
- flex-wrap: wrap;
2220
- justify-content: center;
2221
- align-items: center;
2222
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
2223
- gap: 6px;
2224
-
2225
- &[data-control-type="Bottom-Overflow"] {
2226
- position: absolute;
2227
- bottom: 10px;
2228
- left: 50%;
2229
- transform: translateX(-50%);
2230
- width: 75%;
2231
- }
2232
- .embla__dot {
2233
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
2234
- -webkit-appearance: none;
2235
- appearance: none;
2236
- background-color: var(
2237
- --_ctm-mob-dn-pn-ds-or-dt-cr,
2238
- var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
2239
- );
2240
-
2241
- touch-action: manipulation;
2242
- display: inline-flex;
2243
- text-decoration: none;
2244
- cursor: pointer;
2245
- border: 0;
2246
- padding: 0;
2247
- margin: 0;
2248
- // width: 0.6rem;
2249
- // height: 0.6rem;
2250
- width: var(
2251
- --_ctm-mob-dn-pn-ds-dt-se,
2252
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2253
- );
2254
- height: var(
2255
- --_ctm-mob-dn-pn-ds-dt-se,
2256
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2257
- );
2258
-
2259
- display: flex;
2260
- align-items: center;
2261
- justify-content: center;
2262
- border-radius: 50%;
2263
- }
2264
- .embla__dot:after {
2265
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
2266
- width: var(
2267
- --_ctm-mob-dn-pn-ds-dt-se,
2268
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2269
- );
2270
- height: var(
2271
- --_ctm-mob-dn-pn-ds-dt-se,
2272
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2273
- );
2274
-
2275
- border-radius: 50%;
2276
- display: flex;
2277
- align-items: center;
2278
- content: "";
2279
- }
2280
- .embla__dot--selected:after {
2281
- box-shadow: inset 0 0 0 1px var(--text-body);
2282
- background-color: var(
2283
- --_ctm-mob-dn-pn-ds-ct-dt-cr,
2284
- var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
2285
- );
2286
- }
2287
- &[data-slider-control="Pagination Line"] {
2288
- .embla__dot {
2289
- width: var(
2290
- --_ctm-mob-dn-pn-le-le-wh,
2291
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
2292
- );
2293
- height: var(
2294
- --_ctm-mob-dn-pn-le-le-ht,
2295
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2296
- );
2297
- background-color: var(
2298
- --_ctm-mob-dn-pn-le-or-le-cr,
2299
- var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
2300
- );
2301
- border-radius: 6px;
2302
- }
2303
-
2304
- .embla__dot--selected:after {
2305
- box-shadow: inset 0 0 0 1px var(--text-body);
2306
- border-radius: 6px;
2307
- width: var(
2308
- --_ctm-mob-dn-pn-le-le-wh,
2309
- var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
2310
- );
2311
- height: var(
2312
- --_ctm-mob-dn-pn-le-le-ht,
2313
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2314
- );
2315
- background-color: var(
2316
- --_ctm-mob-dn-pn-le-ct-le-cr,
2317
- var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
2318
- );
2319
- }
2320
- }
2321
- }
2322
-
2323
- .embla__thumbs {
2324
- width: 100%;
2325
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2326
-
2327
- position: relative;
2328
- display: grid;
2329
- grid-template-columns: 1fr;
2330
- overflow: hidden;
2331
- // margin: 10px;
2332
- padding: 10px;
2333
-
2334
- .embla__thumbs__viewport {
2335
- width: 100%;
2336
- height: 100%;
2337
- position: relative;
2338
- display: flex;
2339
- flex-direction: column;
2340
-
2341
- overflow: hidden;
2342
- }
2343
- .embla__thumbs__container {
2344
- display: flex;
2345
- flex-direction: row;
2346
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
2347
- gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
2348
-
2349
- width: 100%;
2350
- // justify-content: center;
2351
- // height: 200px;
2352
-
2353
- .embla__thumbs__slide {
2354
- min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2355
- max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2356
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2357
-
2358
- & img {
2359
- width: 100%;
2360
- height: 100%;
2361
- }
2362
- }
2363
- }
2364
- }
2365
- }
2366
-
2367
- // for bundle details
2368
- }
2369
- }
2370
- .text_ellipsis {
2371
- display: -webkit-box;
2372
- -webkit-box-orient: vertical;
2373
- -webkit-line-clamp: 1;
2374
- line-clamp: 1;
2375
- white-space: normal;
2376
- overflow: hidden;
2377
- }
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
+ // $defaultValues: (
8
+ // --_dm-flt: getListOfResponsive(flex-end, flex-start),
9
+ // );
10
+ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
11
+ display: flow-root !important;
12
+ }
13
+ [data-div-type="element"] {
14
+ &[data-element-type="addProductsTab"] {
15
+ // Import additional styles from partial file
16
+ @import "./add-products-tab-details";
17
+ @import "./add-products-tab-uom-details";
18
+ @import "./product-image-bundles.scss";
19
+
20
+ // width: var(
21
+ // --_sf-el-wh-st-mx,
22
+ // calc(
23
+ // 1% *
24
+ // var(
25
+ // --_mob-ctm-ele-nw-wh-vl,
26
+ // var(--_tab-ctm-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
27
+ // )
28
+ // )
29
+ // );
30
+ // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
31
+ & > div {
32
+ &.wrapper {
33
+ width: 100%;
34
+ // &:has(.buyfor_content_loader) {
35
+ // display: flex;
36
+ // justify-content: center;
37
+ // align-items: center;
38
+ // width: 100%;
39
+ // height: 100%;
40
+ // }
41
+ }
42
+ }
43
+
44
+ .buyfor_content_loader {
45
+ display: flex;
46
+ flex-direction: column;
47
+ align-items: center;
48
+ justify-content: center;
49
+ min-height: 350px;
50
+ .spinner_sm {
51
+ border: 4px solid var(--_gray-200);
52
+ border-top: 4px solid var(--_thm-cs-at-py);
53
+ border-radius: 50%;
54
+ width: 50px;
55
+ height: 50px;
56
+ animation: spin 1s linear infinite;
57
+ margin-bottom: 20px;
58
+ }
59
+
60
+ @keyframes spin {
61
+ 0% {
62
+ transform: rotate(0deg);
63
+ }
64
+ 100% {
65
+ transform: rotate(360deg);
66
+ }
67
+ }
68
+
69
+ .loading-text {
70
+ font-size: 1.2rem;
71
+ letter-spacing: 2px;
72
+ animation: fade 1.5s infinite;
73
+ }
74
+
75
+ @keyframes fade {
76
+ 0%,
77
+ 100% {
78
+ opacity: 0.3;
79
+ }
80
+ 50% {
81
+ opacity: 1;
82
+ }
83
+ }
84
+ }
85
+
86
+ .product-section {
87
+ display: flex;
88
+ justify-content: space-between;
89
+ align-items: center;
90
+ border-bottom: 1px solid var(--_thm-cs-be-se-3);
91
+ padding-bottom: 24px;
92
+ .section-title {
93
+ font-size: var(
94
+ --_ctm-mob-dn-hr-te-ft-se,
95
+ var(--_ctm-tab-dn-hr-te-ft-se, var(--_ctm-dn-hr-te-ft-se))
96
+ );
97
+ font-family: var(
98
+ --_ctm-mob-dn-hr-te-ft-fy,
99
+ var(--_ctm-tab-dn-hr-te-ft-fy, var(--_ctm-dn-hr-te-ft-fy))
100
+ );
101
+ text-transform: var(
102
+ --_ctm-mob-dn-hr-te-tt-tm,
103
+ var(--_ctm-tab-dn-hr-te-tt-tm, var(--_ctm-dn-hr-te-tt-tm))
104
+ );
105
+ word-wrap: var(
106
+ --_ctm-mob-dn-hr-te-wd-wp,
107
+ var(--_ctm-tab-dn-hr-te-wd-wp, var(--_ctm-dn-hr-te-wd-wp))
108
+ );
109
+ word-break: var(
110
+ --_ctm-mob-dn-hr-te-wd-bk,
111
+ var(--_ctm-tab-dn-hr-te-wd-bk, var(--_ctm-dn-hr-te-wd-bk))
112
+ );
113
+ font-weight: var(
114
+ --_ctm-mob-dn-hr-te-ft-wt,
115
+ var(--_ctm-tab-dn-hr-te-ft-wt, var(--_ctm-dn-hr-te-ft-wt))
116
+ );
117
+ line-height: var(
118
+ --_ctm-mob-dn-hr-te-le-ht,
119
+ var(--_ctm-tab-dn-hr-te-le-ht, var(--_ctm-dn-hr-te-le-ht))
120
+ );
121
+ letter-spacing: var(
122
+ --_ctm-mob-dn-hr-te-lr-sg,
123
+ var(--_ctm-tab-dn-hr-te-lr-sg, var(--_ctm-dn-hr-te-lr-sg))
124
+ );
125
+ color: var(--_ctm-mob-dn-hr-te-cr, var(--_ctm-tab-dn-hr-te-cr, var(--_ctm-dn-hr-te-cr)));
126
+ }
127
+ .search-bar {
128
+ display: flex;
129
+ align-items: center;
130
+ gap: 0.5rem;
131
+
132
+ .search-input {
133
+ display: flex;
134
+ align-items: center;
135
+ border: 1px solid var(--_gray-300);
136
+ border-radius: 4px;
137
+ padding: 12px;
138
+ background: transparent;
139
+ // height: 40px;
140
+ transition:
141
+ outline border 0.2s ease,
142
+ border 0.2s ease;
143
+ &:focus-within {
144
+ // border: 1px solid var(--_thm-cs-tt-by-tt);
145
+ border: 1px solid color-mix(in srgb, var(--_thm-cs-tt-by-tt) 40%, transparent);
146
+ outline: 2px solid color-mix(in srgb, var(--_thm-cs-tt-by-tt) 10%, transparent);
147
+ }
148
+
149
+ .icon {
150
+ margin-right: 8px;
151
+ color: var(--_thm-cs-be-se-3);
152
+ }
153
+ .close-icon {
154
+ svg {
155
+ height: 12px;
156
+ }
157
+ }
158
+
159
+ input {
160
+ border: none;
161
+ outline: none;
162
+ font-size: 14px;
163
+ width: 160px;
164
+ }
165
+ }
166
+
167
+ .filter-btn {
168
+ border: 1px solid #d1d5db;
169
+ background: white;
170
+ border-radius: 4px;
171
+ padding: 0.25rem 0.5rem;
172
+ font-size: 18px;
173
+ cursor: pointer;
174
+ }
175
+ }
176
+ }
177
+ .buyforcart_empty_wrp {
178
+ height: 300px;
179
+ }
180
+ .add-product-wrapper {
181
+ display: grid;
182
+ grid-template-columns: 1fr 1fr;
183
+ // gap: 48px;
184
+ &:has(.empty_template) {
185
+ display: flex;
186
+ padding: 48px;
187
+ }
188
+
189
+ .product-list {
190
+ display: flex;
191
+ flex-direction: column;
192
+ gap: 48px;
193
+
194
+ .product-category {
195
+ display: flex;
196
+ flex-direction: column;
197
+ gap: 16px;
198
+
199
+ .product-header {
200
+ display: flex;
201
+ gap: 6px;
202
+ border-bottom: 0.5px solid #d0d5dd;
203
+ padding-bottom: 16px;
204
+ flex-direction: column;
205
+
206
+ h2 {
207
+ font-size: 20px;
208
+ color: var(--_gray-900);
209
+ font-weight: 700;
210
+ line-height: 30px;
211
+ }
212
+ .product-subheader {
213
+ display: flex;
214
+ flex-direction: row;
215
+ gap: 12px;
216
+ word-break: keep-all;
217
+ align-items: center;
218
+
219
+ @media (max-width: 500px) {
220
+ flex-direction: column;
221
+ white-space: nowrap;
222
+ align-items: flex-start;
223
+ }
224
+ .product-quota {
225
+ font-weight: 400;
226
+ font-size: 14px;
227
+ line-height: 20px;
228
+ letter-spacing: 0%;
229
+ color: var(--_gray-500);
230
+ padding-right: 12px;
231
+ border-right: 1px solid var(--_border-light-color);
232
+ gap: 6px;
233
+ display: flex;
234
+ span {
235
+ font-weight: 700;
236
+ font-size: 14px;
237
+ line-height: 20px;
238
+ color: var(--_gray-900);
239
+ }
240
+ }
241
+ .product-payment-methods {
242
+ font-weight: 400;
243
+ font-size: 14px;
244
+ line-height: 20px;
245
+ letter-spacing: 0%;
246
+ color: var(--_gray-500);
247
+ gap: 6px;
248
+ display: flex;
249
+ span {
250
+ font-weight: 700;
251
+ font-size: 14px;
252
+ line-height: 20px;
253
+ letter-spacing: 0%;
254
+ color: var(--_gray-900);
255
+ }
256
+ }
257
+ }
258
+ }
259
+
260
+ .product-grid {
261
+ display: grid;
262
+ // grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
263
+ grid-template-columns: 1fr 1fr;
264
+ gap: 16px;
265
+ max-height: 900px;
266
+ overflow-y: auto;
267
+ overflow-x: hidden;
268
+ padding: 24px 24px 24px 0;
269
+ background-color: var(--_base-white);
270
+
271
+ @media (max-width: 500px) {
272
+ grid-template-columns: 1fr;
273
+ }
274
+
275
+ .product-card {
276
+ display: flex;
277
+ flex-direction: column;
278
+ }
279
+ .product-card,
280
+ .tile {
281
+ gap: 24px;
282
+ transition: background border 400ms ease-in-out;
283
+ // padding: 16px;
284
+ // background-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-bd-cr);
285
+ @include BgColorLighter(var(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-bd-cr), 5%);
286
+ padding: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-pg);
287
+ border-width: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-wh);
288
+ border-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-cr);
289
+ border-style: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-se);
290
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-rs);
291
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-ae)
292
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-br)
293
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-sd)
294
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-cr);
295
+ // border: 0.5px solid transparent;
296
+ &:hover {
297
+ // background-color: var(--_gray-100);
298
+ // border: 0.5px solid #243dc6;
299
+ cursor: pointer;
300
+ // border-radius: 4px;
301
+ // background-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-bd-cr);
302
+ @include BgColorLighter(var(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-bd-cr), 5%);
303
+ padding: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-pg);
304
+ border-width: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-wh);
305
+ border-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-cr);
306
+ border-style: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-se);
307
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-rs);
308
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-ae)
309
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-br)
310
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-sd)
311
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-cr);
312
+ }
313
+ &.active {
314
+ // border: 0.5px solid #243dc6;
315
+ // border-radius: 4px;
316
+ // border-width: 0.5px;
317
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-pg));
318
+
319
+ // background-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-bd-cr);
320
+ @include BgColorLighter(var(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-bd-cr), 5%);
321
+ border-width: var(
322
+ --_sf-hr-br-wh,
323
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-wh)
324
+ );
325
+ border-color: var(
326
+ --_sf-hr-br-cr,
327
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-cr)
328
+ );
329
+ border-style: var(
330
+ --_sf-hr-br-se,
331
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-se)
332
+ );
333
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-rs);
334
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-ae)
335
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-br)
336
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-sd)
337
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-cr);
338
+ }
339
+
340
+ .product-image {
341
+ width: 268px;
342
+ height: 240px;
343
+ display: flex;
344
+ align-items: center;
345
+ justify-content: center;
346
+ align-self: center;
347
+ }
348
+
349
+ .product-info {
350
+ gap: 4px;
351
+ display: flex;
352
+ flex-direction: column;
353
+
354
+ .product-title {
355
+ font-family: var(
356
+ --_ctm-mob-dn-pt-cd-pt-cd-te-ft-fy,
357
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-te-ft-fy))
358
+ );
359
+ text-transform: var(
360
+ --_ctm-mob-dn-pt-cd-pt-cd-te-tt-tm,
361
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-tt-tm, var(--_ctm-dn-pt-cd-pt-cd-te-tt-tm))
362
+ );
363
+ word-wrap: var(
364
+ --_ctm-mob-dn-pt-cd-pt-cd-te-wd-wp,
365
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-wd-wp, var(--_ctm-dn-pt-cd-pt-cd-te-wd-wp))
366
+ );
367
+ word-break: var(
368
+ --_ctm-mob-dn-pt-cd-pt-cd-te-wd-bk,
369
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-wd-bk, var(--_ctm-dn-pt-cd-pt-cd-te-wd-bk))
370
+ );
371
+ font-size: var(
372
+ --_ctm-mob-dn-pt-cd-pt-cd-te-ft-se,
373
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-se, var(--_ctm-dn-pt-cd-pt-cd-te-ft-se))
374
+ );
375
+ font-weight: var(
376
+ --_ctm-mob-dn-pt-cd-pt-cd-te-ft-wt,
377
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-te-ft-wt))
378
+ );
379
+ color: var(
380
+ --_ctm-mob-dn-pt-cd-pt-cd-te-cr,
381
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-cr, var(--_ctm-dn-pt-cd-pt-cd-te-cr))
382
+ );
383
+ line-height: var(
384
+ --_ctm-mob-dn-pt-cd-pt-cd-te-le-ht,
385
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-le-ht, var(--_ctm-dn-pt-cd-pt-cd-te-le-ht))
386
+ );
387
+ letter-spacing: var(
388
+ --_ctm-mob-dn-pt-cd-pt-cd-te-lr-sg,
389
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-te-lr-sg))
390
+ );
391
+ text-decoration: var(
392
+ --_ctm-mob-dn-pt-cd-pt-cd-te-ue,
393
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-ue, var(--_ctm-dn-pt-cd-pt-cd-te-ue))
394
+ );
395
+ font-style: var(
396
+ --_ctm-mob-dn-pt-cd-pt-cd-te-ft-se-ic,
397
+ var(
398
+ --_ctm-tab-dn-pt-cd-pt-cd-te-ft-se-ic,
399
+ var(--_ctm-dn-pt-cd-pt-cd-te-ft-se-ic)
400
+ )
401
+ );
402
+ padding: var(
403
+ --_ctm-mob-dn-pt-cd-pt-cd-te-pg,
404
+ var(--_ctm-tab-dn-pt-cd-pt-cd-te-pg, var(--_ctm-dn-pt-cd-pt-cd-te-pg))
405
+ );
406
+ }
407
+
408
+ .product-code {
409
+ font-family: var(
410
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-fy,
411
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-fy))
412
+ );
413
+ text-transform: var(
414
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-tt-tm,
415
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-tt-tm, var(--_ctm-dn-pt-cd-pt-cd-dn-tt-tm))
416
+ );
417
+ word-wrap: var(
418
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-wd-wp,
419
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-wd-wp, var(--_ctm-dn-pt-cd-pt-cd-dn-wd-wp))
420
+ );
421
+ word-break: var(
422
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-wd-bk,
423
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-wd-bk, var(--_ctm-dn-pt-cd-pt-cd-dn-wd-bk))
424
+ );
425
+ font-size: var(
426
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-se,
427
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-se, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-se))
428
+ );
429
+ font-weight: var(
430
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-wt,
431
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-dn-ft-wt))
432
+ );
433
+ color: var(
434
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-cr,
435
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-cr, var(--_ctm-dn-pt-cd-pt-cd-dn-cr))
436
+ );
437
+ line-height: var(
438
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-le-ht,
439
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-le-ht, var(--_ctm-dn-pt-cd-pt-cd-dn-le-ht))
440
+ );
441
+ letter-spacing: var(
442
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-lr-sg,
443
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-dn-lr-sg))
444
+ );
445
+ text-decoration: var(
446
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-ue,
447
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-ue, var(--_ctm-dn-pt-cd-pt-cd-dn-ue))
448
+ );
449
+ font-style: var(
450
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-ft-se-ic,
451
+ var(
452
+ --_ctm-tab-dn-pt-cd-pt-cd-dn-ft-se-ic,
453
+ var(--_ctm-dn-pt-cd-pt-cd-dn-ft-se-ic)
454
+ )
455
+ );
456
+ padding: var(
457
+ --_ctm-mob-dn-pt-cd-pt-cd-dn-pg,
458
+ var(--_ctm-tab-dn-pt-cd-pt-cd-dn-pg, var(--_ctm-dn-pt-cd-pt-cd-dn-pg))
459
+ );
460
+ }
461
+ .product-price {
462
+ font-family: var(
463
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-fy,
464
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-fy))
465
+ );
466
+ text-transform: var(
467
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-tt-tm,
468
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-tt-tm, var(--_ctm-dn-pt-cd-pt-cd-pe-tt-tm))
469
+ );
470
+ word-wrap: var(
471
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-wd-wp,
472
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-wd-wp, var(--_ctm-dn-pt-cd-pt-cd-pe-wd-wp))
473
+ );
474
+ word-break: var(
475
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-wd-bk,
476
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-wd-bk, var(--_ctm-dn-pt-cd-pt-cd-pe-wd-bk))
477
+ );
478
+ font-size: var(
479
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-se,
480
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-se, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-se))
481
+ );
482
+ font-weight: var(
483
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-wt,
484
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-pe-ft-wt))
485
+ );
486
+ color: var(
487
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-cr,
488
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-cr, var(--_ctm-dn-pt-cd-pt-cd-pe-cr))
489
+ );
490
+ line-height: var(
491
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-le-ht,
492
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-le-ht, var(--_ctm-dn-pt-cd-pt-cd-pe-le-ht))
493
+ );
494
+ letter-spacing: var(
495
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-lr-sg,
496
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-pe-lr-sg))
497
+ );
498
+ text-decoration: var(
499
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-ue,
500
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-ue, var(--_ctm-dn-pt-cd-pt-cd-pe-ue))
501
+ );
502
+ font-style: var(
503
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-ft-se-ic,
504
+ var(
505
+ --_ctm-tab-dn-pt-cd-pt-cd-pe-ft-se-ic,
506
+ var(--_ctm-dn-pt-cd-pt-cd-pe-ft-se-ic)
507
+ )
508
+ );
509
+ padding: var(
510
+ --_ctm-mob-dn-pt-cd-pt-cd-pe-pg,
511
+ var(--_ctm-tab-dn-pt-cd-pt-cd-pe-pg, var(--_ctm-dn-pt-cd-pt-cd-pe-pg))
512
+ );
513
+ }
514
+
515
+ .product-meta {
516
+ font-size: 0.75rem;
517
+ display: flex;
518
+ gap: 0.5rem;
519
+ margin-top: 0.5rem;
520
+ justify-content: space-between;
521
+ align-items: center;
522
+ .product-views {
523
+ gap: 6px;
524
+ display: flex;
525
+ flex-direction: row;
526
+ align-items: center;
527
+ .svg_icon {
528
+ svg {
529
+ path {
530
+ stroke: var(--_thm-cs-tt-ss);
531
+ }
532
+ }
533
+ }
534
+ .product_info {
535
+ gap: 6px;
536
+ display: flex;
537
+ flex-direction: row;
538
+ align-items: center;
539
+ .icon {
540
+ display: flex;
541
+ svg {
542
+ width: 20px;
543
+ height: 20px;
544
+
545
+ path {
546
+ stroke: var(--_thm-cs-be-se-3);
547
+ }
548
+ }
549
+ }
550
+
551
+ //
552
+ // font-weight: 700;
553
+ // font-size: 16px;
554
+ // line-height: 150%;
555
+ // color: var(--_gray-600);
556
+ font-family: var(
557
+ --_ctm-mob-dn-pt-cd-pt-cd-io-ft-fy,
558
+ var(--_ctm-tab-dn-pt-cd-pt-cd-io-ft-fy, var(--_ctm-dn-pt-cd-pt-cd-io-ft-fy))
559
+ );
560
+ text-transform: var(
561
+ --_ctm-mob-dn-pt-cd-pt-cd-io-tt-tm,
562
+ var(--_ctm-tab-dn-pt-cd-pt-cd-io-tt-tm, var(--_ctm-dn-pt-cd-pt-cd-io-tt-tm))
563
+ );
564
+ word-wrap: var(
565
+ --_ctm-mob-dn-pt-cd-pt-cd-io-wd-wp,
566
+ var(--_ctm-tab-dn-pt-cd-pt-cd-io-wd-wp, var(--_ctm-dn-pt-cd-pt-cd-io-wd-wp))
567
+ );
568
+ word-break: var(
569
+ --_ctm-mob-dn-pt-cd-pt-cd-io-wd-bk,
570
+ var(--_ctm-tab-dn-pt-cd-pt-cd-io-wd-bk, var(--_ctm-dn-pt-cd-pt-cd-io-wd-bk))
571
+ );
572
+ &.flex__overflow {
573
+ white-space: normal;
574
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
575
+ }
576
+ font-size: var(
577
+ --_ctm-mob-dn-pt-cd-pt-cd-io-ft-se,
578
+ var(--_ctm-tab-dn-pt-cd-pt-cd-io-ft-se, var(--_ctm-dn-pt-cd-pt-cd-io-ft-se))
579
+ );
580
+ font-weight: var(
581
+ --_ctm-mob-dn-pt-cd-pt-cd-io-ft-wt,
582
+ var(--_ctm-tab-dn-pt-cd-pt-cd-io-ft-wt, var(--_ctm-dn-pt-cd-pt-cd-io-ft-wt))
583
+ );
584
+ color: var(
585
+ --_ctm-mob-dn-pt-cd-pt-cd-io-cr,
586
+ var(--_ctm-tab-dn-pt-cd-pt-cd-io-cr, var(--_ctm-dn-pt-cd-pt-cd-io-cr))
587
+ );
588
+ line-height: var(
589
+ --_ctm-mob-dn-pt-cd-pt-cd-io-le-ht,
590
+ var(--_ctm-tab-dn-pt-cd-pt-cd-io-le-ht, var(--_ctm-dn-pt-cd-pt-cd-io-le-ht))
591
+ );
592
+ letter-spacing: var(
593
+ --_ctm-mob-dn-pt-cd-pt-cd-io-lr-sg,
594
+ var(--_ctm-tab-dn-pt-cd-pt-cd-io-lr-sg, var(--_ctm-dn-pt-cd-pt-cd-io-lr-sg))
595
+ );
596
+ text-decoration: var(
597
+ --_ctm-mob-dn-pt-cd-pt-cd-io-ue,
598
+ var(--_ctm-tab-dn-pt-cd-pt-cd-io-ue, var(--_ctm-dn-pt-cd-pt-cd-io-ue))
599
+ );
600
+ font-style: var(
601
+ --_ctm-mob-dn-pt-cd-pt-cd-io-ft-se-ic,
602
+ var(
603
+ --_ctm-tab-dn-pt-cd-pt-cd-io-ft-se-ic,
604
+ var(--_ctm-dn-pt-cd-pt-cd-io-ft-se-ic)
605
+ )
606
+ );
607
+ padding: var(
608
+ --_ctm-mob-dn-pt-cd-pt-cd-io-pg,
609
+ var(--_ctm-tab-dn-pt-cd-pt-cd-io-pg, var(--_ctm-dn-pt-cd-pt-cd-io-pg))
610
+ );
611
+ }
612
+ }
613
+ .product-cart {
614
+ position: relative;
615
+ // width: 50px;
616
+ // height: 50px;
617
+ .icon {
618
+ display: flex;
619
+ svg {
620
+ width: 32px;
621
+ height: 32px;
622
+
623
+ path {
624
+ stroke: var(--_gray-400);
625
+ }
626
+ }
627
+ }
628
+ .cart-badge {
629
+ background-color: var(--_thm-cs-at-py);
630
+ color: #ffffff;
631
+ border-radius: 4px;
632
+ font-size: 12px;
633
+ font-weight: 400;
634
+ height: 20px;
635
+ width: 20px;
636
+ position: absolute;
637
+ top: -8px;
638
+ right: -8px;
639
+ display: flex;
640
+ align-items: center;
641
+ justify-content: center;
642
+ }
643
+ }
644
+ }
645
+ }
646
+ }
647
+ }
648
+ }
649
+ }
650
+ .add-product-list-details {
651
+ // border-left: 1px solid var(--_thm-cs-be-se-3);
652
+ border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-cr);
653
+ border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-wh);
654
+ border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-se);
655
+ }
656
+ .customizer-panel {
657
+ display: flex;
658
+ flex-direction: column;
659
+ // gap: 12px;
660
+ // border-left: 0.5px solid #d0d5dd;
661
+ // padding-left: 48px;
662
+ padding: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-pg);
663
+ gap: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-im-gp);
664
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-rs);
665
+ background-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-bd-cr);
666
+ // border-color: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-cr);
667
+ // border-width: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-wh);
668
+ // border-style: prepareMediaVariable(--_ctm-dn-pt-pl-dn-pt-ds-wt-br-se);
669
+
670
+ .product-header {
671
+ display: flex;
672
+ flex-direction: column;
673
+ gap: 12px;
674
+ h2 {
675
+ font-family: var(
676
+ --_ctm-mob-dn-pt-ds-pt-te-ft-fy,
677
+ var(--_ctm-tab-dn-pt-ds-pt-te-ft-fy, var(--_ctm-dn-pt-ds-pt-te-ft-fy))
678
+ );
679
+ text-transform: var(
680
+ --_ctm-mob-dn-pt-ds-pt-te-tt-tm,
681
+ var(--_ctm-tab-dn-pt-ds-pt-te-tt-tm, var(--_ctm-dn-pt-ds-pt-te-tt-tm))
682
+ );
683
+ word-wrap: var(
684
+ --_ctm-mob-dn-pt-ds-pt-te-wd-wp,
685
+ var(--_ctm-tab-dn-pt-ds-pt-te-wd-wp, var(--_ctm-dn-pt-ds-pt-te-wd-wp))
686
+ );
687
+ word-break: var(
688
+ --_ctm-mob-dn-pt-ds-pt-te-wd-bk,
689
+ var(--_ctm-tab-dn-pt-ds-pt-te-wd-bk, var(--_ctm-dn-pt-ds-pt-te-wd-bk))
690
+ );
691
+ font-size: var(
692
+ --_ctm-mob-dn-pt-ds-pt-te-ft-se,
693
+ var(--_ctm-tab-dn-pt-ds-pt-te-ft-se, var(--_ctm-dn-pt-ds-pt-te-ft-se))
694
+ );
695
+ font-weight: var(
696
+ --_ctm-mob-dn-pt-ds-pt-te-ft-wt,
697
+ var(--_ctm-tab-dn-pt-ds-pt-te-ft-wt, var(--_ctm-dn-pt-ds-pt-te-ft-wt))
698
+ );
699
+ color: var(
700
+ --_ctm-mob-dn-pt-ds-pt-te-cr,
701
+ var(--_ctm-tab-dn-pt-ds-pt-te-cr, var(--_ctm-dn-pt-ds-pt-te-cr))
702
+ );
703
+ line-height: var(
704
+ --_ctm-mob-dn-pt-ds-pt-te-le-ht,
705
+ var(--_ctm-tab-dn-pt-ds-pt-te-le-ht, var(--_ctm-dn-pt-ds-pt-te-le-ht))
706
+ );
707
+ letter-spacing: var(
708
+ --_ctm-mob-dn-pt-ds-pt-te-lr-sg,
709
+ var(--_ctm-tab-dn-pt-ds-pt-te-lr-sg, var(--_ctm-dn-pt-ds-pt-te-lr-sg))
710
+ );
711
+ // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
712
+ // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
713
+ padding: var(
714
+ --_ctm-dn-mob-pt-ds-pt-te-pg,
715
+ var(--_ctm-tab-dn-pt-ds-pt-te-pg, var(--_ctm-dn-pt-ds-pt-te-pg))
716
+ );
717
+ }
718
+ p {
719
+ font-family: var(
720
+ --_ctm-mob-dn-pt-ds-pt-dn-ft-fy,
721
+ var(--_ctm-tab-dn-pt-ds-pt-dn-ft-fy, var(--_ctm-dn-pt-ds-pt-dn-ft-fy))
722
+ );
723
+ text-transform: var(
724
+ --_ctm-mob-dn-pt-ds-pt-dn-tt-tm,
725
+ var(--_ctm-tab-dn-pt-ds-pt-dn-tt-tm, var(--_ctm-dn-pt-ds-pt-dn-tt-tm))
726
+ );
727
+ word-wrap: var(
728
+ --_ctm-mob-dn-pt-ds-pt-dn-wd-wp,
729
+ var(--_ctm-tab-dn-pt-ds-pt-dn-wd-wp, var(--_ctm-dn-pt-ds-pt-dn-wd-wp))
730
+ );
731
+ word-break: var(
732
+ --_ctm-mob-dn-pt-ds-pt-dn-wd-bk,
733
+ var(--_ctm-tab-dn-pt-ds-pt-dn-wd-bk, var(--_ctm-dn-pt-ds-pt-dn-wd-bk))
734
+ );
735
+ font-size: var(
736
+ --_ctm-mob-dn-pt-ds-pt-dn-ft-se,
737
+ var(--_ctm-tab-dn-pt-ds-pt-dn-ft-se, var(--_ctm-dn-pt-ds-pt-dn-ft-se))
738
+ );
739
+ font-weight: var(
740
+ --_ctm-mob-dn-pt-ds-pt-dn-ft-wt,
741
+ var(--_ctm-tab-dn-pt-ds-pt-dn-ft-wt, var(--_ctm-dn-pt-ds-pt-dn-ft-wt))
742
+ );
743
+ color: var(
744
+ --_ctm-mob-dn-pt-ds-pt-dn-cr,
745
+ var(--_ctm-tab-dn-pt-ds-pt-dn-cr, var(--_ctm-dn-pt-ds-pt-dn-cr))
746
+ );
747
+ line-height: var(
748
+ --_ctm-mob-dn-pt-ds-pt-dn-le-ht,
749
+ var(--_ctm-tab-dn-pt-ds-pt-dn-le-ht, var(--_ctm-dn-pt-ds-pt-dn-le-ht))
750
+ );
751
+ letter-spacing: var(
752
+ --_ctm-mob-dn-pt-ds-pt-dn-lr-sg,
753
+ var(--_ctm-tab-dn-pt-ds-pt-dn-lr-sg, var(--_ctm-dn-pt-ds-pt-dn-lr-sg))
754
+ );
755
+ // text-decoration: var(--_ctm-dn-pt-ds-pt-te-ue);
756
+ // font-style: var(--_ctm-dn-pt-ds-pt-te-ft-se-ic);
757
+ padding: var(
758
+ --_ctm-dn-mob-pt-ds-pt-dn-pg,
759
+ var(--_ctm-tab-dn-pt-ds-pt-dn-pg, var(--_ctm-dn-pt-ds-pt-dn-pg))
760
+ );
761
+ }
762
+ }
763
+
764
+ // .product_qty_wrapper {
765
+ // display: flex;
766
+ // // width: 124px;
767
+ // flex-direction: column;
768
+ // align-items: flex-start;
769
+ // gap: 6px;
770
+ // width: 120px;
771
+
772
+ // .product_qty_container {
773
+ // display: flex;
774
+ // align-items: flex-start;
775
+ // align-self: stretch;
776
+ // border-radius: 4px;
777
+ // border: 0.5px solid #d0d5dd;
778
+ // background: #fff;
779
+ // box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
780
+
781
+ // .product_qty_label {
782
+ // display: flex;
783
+ // padding: 8px 12px;
784
+ // align-items: center;
785
+ // border-radius: 8px 0px 0px 8px;
786
+ // p {
787
+ // color: #475467;
788
+ // font-size: 16px;
789
+ // font-weight: 400;
790
+ // line-height: 24px;
791
+ // }
792
+ // }
793
+
794
+ // .product_qty_number {
795
+ // display: flex;
796
+ // padding: 8px 12px;
797
+ // align-items: center;
798
+ // gap: 8px;
799
+ // flex: 1 0 0;
800
+ // align-self: stretch;
801
+ // border-radius: 0px 4px 4px 0px;
802
+ // background: #fff;
803
+ // border-left: 1px solid #d0d5dd;
804
+ // max-width: 80px;
805
+ // text-align: center;
806
+ // &::-webkit-outer-spin-button,
807
+ // &::-webkit-inner-spin-button {
808
+ // -webkit-appearance: none;
809
+ // margin: 0;
810
+ // }
811
+ // }
812
+ // }
813
+ // }
814
+ .denominations_container {
815
+ // font-size: 16px;
816
+ display: flex;
817
+ flex-direction: column;
818
+ // gap: 6px;
819
+ // padding-bottom: 14px;
820
+
821
+ background-color: var(
822
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-bd-cr,
823
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-bd-cr))
824
+ );
825
+ border-color: var(
826
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-cr,
827
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-cr))
828
+ );
829
+ border-radius: var(
830
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-rs,
831
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-rs, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-rs))
832
+ );
833
+ border-style: var(
834
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-se,
835
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-se, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-se))
836
+ );
837
+ border-width: var(
838
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-br-wh,
839
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-br-wh, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-br-wh))
840
+ );
841
+ box-shadow: var(
842
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-ae,
843
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-ae, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-ae))
844
+ )
845
+ var(
846
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-br,
847
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-br, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-br))
848
+ )
849
+ var(
850
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-sd,
851
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-sd, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-sd))
852
+ )
853
+ var(
854
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-sw-cr,
855
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-sw-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-sw-cr))
856
+ );
857
+ padding: var(
858
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-pg,
859
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-pg, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-pg))
860
+ );
861
+ gap: var(
862
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-im-gp,
863
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-im-gp, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-im-gp))
864
+ );
865
+ .denominations_title {
866
+ // margin-bottom: 4px;
867
+ // font-size: 16px;
868
+ // color: #000000;
869
+ // font-weight: 500;
870
+ // line-height: 150%;
871
+ font-family: var(
872
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-fy,
873
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-fy))
874
+ );
875
+ text-transform: var(
876
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-tt-tm,
877
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-ts-tt-tm))
878
+ );
879
+ word-wrap: var(
880
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-wd-wp,
881
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-ts-wd-wp))
882
+ );
883
+ word-break: var(
884
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-wd-bk,
885
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-ts-wd-bk))
886
+ );
887
+ color: var(
888
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-cr,
889
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-cr, var(--_ctm-dn-pt-ds-gt-cd-ts-cr))
890
+ );
891
+ font-weight: var(
892
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-wt,
893
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-wt))
894
+ );
895
+ font-size: var(
896
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se,
897
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se))
898
+ );
899
+ text-decoration: var(
900
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ue,
901
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ue, var(--_ctm-dn-pt-ds-gt-cd-ts-ue))
902
+ );
903
+ letter-spacing: var(
904
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-lr-sg,
905
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ts-lr-sg))
906
+ );
907
+ line-height: var(
908
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-le-ht,
909
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ts-le-ht))
910
+ );
911
+ font-style: var(
912
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se-ic,
913
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se-ic))
914
+ );
915
+ text-align: var(
916
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-tt-an,
917
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ts-tt-an))
918
+ );
919
+ }
920
+ .denominations_grid {
921
+ display: flex;
922
+ // gap: 8px;
923
+ flex-wrap: wrap;
924
+ margin-top: 12px;
925
+ flex-direction: row;
926
+ gap: 12px;
927
+ // gap: var(
928
+ // --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-im-gp,
929
+ // var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-im-gp, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-im-gp))
930
+ // );
931
+ .amount_btn {
932
+ transition: color 0.3s ease;
933
+ cursor: pointer;
934
+ display: flex;
935
+ align-items: center;
936
+ justify-content: center;
937
+ // padding: 4px;
938
+ min-width: 20px;
939
+ min-height: 20px;
940
+ box-sizing: content-box;
941
+ // font-size: 16px;
942
+ // font-weight: 600;
943
+ // line-height: 150%;
944
+ // background-color: #ffffff;
945
+ // border: 1px solid #d6d6d6;
946
+ background-color: var(
947
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-bd-cr,
948
+ var(
949
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-bd-cr,
950
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-bd-cr)
951
+ )
952
+ );
953
+ font-family: var(
954
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-fy,
955
+ var(
956
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-fy,
957
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-fy)
958
+ )
959
+ );
960
+ text-transform: var(
961
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-tt-tm,
962
+ var(
963
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-tt-tm,
964
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-tt-tm)
965
+ )
966
+ );
967
+ word-wrap: var(
968
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-wd-wp,
969
+ var(
970
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-wd-wp,
971
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-wd-wp)
972
+ )
973
+ );
974
+ word-break: var(
975
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-wd-bk,
976
+ var(
977
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-wd-bk,
978
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-wd-bk)
979
+ )
980
+ );
981
+ &.flex__overflow {
982
+ white-space: normal;
983
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
984
+ }
985
+ color: var(
986
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-cr,
987
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-cr))
988
+ );
989
+ font-weight: var(
990
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-wt,
991
+ var(
992
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-wt,
993
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-wt)
994
+ )
995
+ );
996
+ font-size: var(
997
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-se,
998
+ var(
999
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-se,
1000
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-se)
1001
+ )
1002
+ );
1003
+ text-decoration: var(
1004
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ue,
1005
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ue, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ue))
1006
+ );
1007
+ letter-spacing: var(
1008
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-lr-sg,
1009
+ var(
1010
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-lr-sg,
1011
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-lr-sg)
1012
+ )
1013
+ );
1014
+ line-height: var(
1015
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-le-ht,
1016
+ var(
1017
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-le-ht,
1018
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-le-ht)
1019
+ )
1020
+ );
1021
+ font-style: var(
1022
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-ft-se-ic,
1023
+ var(
1024
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-ft-se-ic,
1025
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-ft-se-ic)
1026
+ )
1027
+ );
1028
+ text-align: var(
1029
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-tt-an,
1030
+ var(
1031
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-tt-an,
1032
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-tt-an)
1033
+ )
1034
+ );
1035
+ border-color: var(
1036
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-cr,
1037
+ var(
1038
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-cr,
1039
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-cr)
1040
+ )
1041
+ );
1042
+ border-radius: var(
1043
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-rs,
1044
+ var(
1045
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-rs,
1046
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-rs)
1047
+ )
1048
+ );
1049
+ border-style: var(
1050
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-se,
1051
+ var(
1052
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-se,
1053
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-se)
1054
+ )
1055
+ );
1056
+ border-width: var(
1057
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-br-wh,
1058
+ var(
1059
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-br-wh,
1060
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-br-wh)
1061
+ )
1062
+ );
1063
+ box-shadow: var(
1064
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-ae,
1065
+ var(
1066
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-ae,
1067
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-ae)
1068
+ )
1069
+ )
1070
+ var(
1071
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-br,
1072
+ var(
1073
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-br,
1074
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-br)
1075
+ )
1076
+ )
1077
+ var(
1078
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-sd,
1079
+ var(
1080
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-sd,
1081
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-sd)
1082
+ )
1083
+ )
1084
+ var(
1085
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-sw-cr,
1086
+ var(
1087
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-sw-cr,
1088
+ var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-sw-cr)
1089
+ )
1090
+ );
1091
+ padding: var(
1092
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-dt-se-pg,
1093
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-dt-se-pg, var(--_ctm-dn-pt-ds-gt-cd-cd-dt-se-pg))
1094
+ );
1095
+ &.active {
1096
+ background-color: var(
1097
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-bd-cr,
1098
+ var(
1099
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-bd-cr,
1100
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-bd-cr)
1101
+ )
1102
+ );
1103
+ font-family: var(
1104
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-fy,
1105
+ var(
1106
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-fy,
1107
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-fy)
1108
+ )
1109
+ );
1110
+ text-transform: var(
1111
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-tt-tm,
1112
+ var(
1113
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-tt-tm,
1114
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-tt-tm)
1115
+ )
1116
+ );
1117
+ word-wrap: var(
1118
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-wd-wp,
1119
+ var(
1120
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-wd-wp,
1121
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-wd-wp)
1122
+ )
1123
+ );
1124
+ word-break: var(
1125
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-wd-bk,
1126
+ var(
1127
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-wd-bk,
1128
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-wd-bk)
1129
+ )
1130
+ );
1131
+ color: var(
1132
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-cr,
1133
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-cr, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-cr))
1134
+ );
1135
+ font-weight: var(
1136
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-wt,
1137
+ var(
1138
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-wt,
1139
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-wt)
1140
+ )
1141
+ );
1142
+ font-size: var(
1143
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-se,
1144
+ var(
1145
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-se,
1146
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-se)
1147
+ )
1148
+ );
1149
+ text-decoration: var(
1150
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ue,
1151
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ue, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ue))
1152
+ );
1153
+ letter-spacing: var(
1154
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-lr-sg,
1155
+ var(
1156
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-lr-sg,
1157
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-lr-sg)
1158
+ )
1159
+ );
1160
+ line-height: var(
1161
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-le-ht,
1162
+ var(
1163
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-le-ht,
1164
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-le-ht)
1165
+ )
1166
+ );
1167
+ font-style: var(
1168
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-ft-se-ic,
1169
+ var(
1170
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-ft-se-ic,
1171
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-ft-se-ic)
1172
+ )
1173
+ );
1174
+ text-align: var(
1175
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-tt-an,
1176
+ var(
1177
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-tt-an,
1178
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-tt-an)
1179
+ )
1180
+ );
1181
+ border-color: var(
1182
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-cr,
1183
+ var(
1184
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-cr,
1185
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-cr)
1186
+ )
1187
+ );
1188
+ border-radius: var(
1189
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-rs,
1190
+ var(
1191
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-rs,
1192
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-rs)
1193
+ )
1194
+ );
1195
+ border-style: var(
1196
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-se,
1197
+ var(
1198
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-se,
1199
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-se)
1200
+ )
1201
+ );
1202
+ border-width: var(
1203
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-br-wh,
1204
+ var(
1205
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-br-wh,
1206
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-br-wh)
1207
+ )
1208
+ );
1209
+ box-shadow: var(
1210
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-ae,
1211
+ var(
1212
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-ae,
1213
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-ae)
1214
+ )
1215
+ )
1216
+ var(
1217
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-br,
1218
+ var(
1219
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-br,
1220
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-br)
1221
+ )
1222
+ )
1223
+ var(
1224
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-sd,
1225
+ var(
1226
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-sd,
1227
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-sd)
1228
+ )
1229
+ )
1230
+ var(
1231
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-sw-cr,
1232
+ var(
1233
+ --_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-sw-cr,
1234
+ var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-sw-cr)
1235
+ )
1236
+ );
1237
+ padding: var(
1238
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-sd-se-pg,
1239
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-sd-se-pg, var(--_ctm-dn-pt-ds-gt-cd-cd-sd-se-pg))
1240
+ );
1241
+ // background-color: #f5f5f5;
1242
+ // border: 1px solid #3e4784;
1243
+ // color: #000080;
1244
+ }
1245
+ }
1246
+ }
1247
+ .custom_amount_container {
1248
+ display: flex;
1249
+ flex-direction: column;
1250
+ gap: 8px;
1251
+ .error_text {
1252
+ font-size: 12px;
1253
+ color: var(--_error-500);
1254
+ }
1255
+ .custom_amount_label {
1256
+ font-family: var(
1257
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-fy,
1258
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-fy))
1259
+ );
1260
+ text-transform: var(
1261
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-tt-tm,
1262
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-ls-tt-tm))
1263
+ );
1264
+ word-wrap: var(
1265
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-wd-wp,
1266
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-ls-wd-wp))
1267
+ );
1268
+ word-break: var(
1269
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-wd-bk,
1270
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-ls-wd-bk))
1271
+ );
1272
+ color: var(
1273
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-cr,
1274
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-cr, var(--_ctm-dn-pt-ds-gt-cd-ls-cr))
1275
+ );
1276
+ font-weight: var(
1277
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-wt,
1278
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-wt))
1279
+ );
1280
+ font-size: var(
1281
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se,
1282
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se))
1283
+ );
1284
+ text-decoration: var(
1285
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ue,
1286
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ue, var(--_ctm-dn-pt-ds-gt-cd-ls-ue))
1287
+ );
1288
+ letter-spacing: var(
1289
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-lr-sg,
1290
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ls-lr-sg))
1291
+ );
1292
+ line-height: var(
1293
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-le-ht,
1294
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ls-le-ht))
1295
+ );
1296
+ font-style: var(
1297
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se-ic,
1298
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se-ic))
1299
+ );
1300
+ text-align: var(
1301
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-tt-an,
1302
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ls-tt-an))
1303
+ );
1304
+ padding: var(
1305
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-pg,
1306
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-pg, var(--_ctm-dn-pt-ds-gt-cd-ls-pg))
1307
+ );
1308
+ }
1309
+ .custom_amount_input {
1310
+ height: 40px;
1311
+ display: flex;
1312
+ position: relative;
1313
+ // gap: 6px;
1314
+ align-items: center;
1315
+ // border-radius: 4px;
1316
+ // background: #fff;
1317
+ // border: 1px solid #d0d5dd;
1318
+ // padding: 8px 12px;
1319
+ background-color: var(
1320
+ --_ctm-mob-dn-pt-ds-gt-cd-is-bd-cr,
1321
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-is-bd-cr))
1322
+ );
1323
+
1324
+ border-color: var(
1325
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-cr,
1326
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-dn-pt-ds-gt-cd-is-br-cr))
1327
+ );
1328
+ border-radius: var(
1329
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-rs,
1330
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-dn-pt-ds-gt-cd-is-br-rs))
1331
+ );
1332
+ border-style: var(
1333
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-se,
1334
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-dn-pt-ds-gt-cd-is-br-se))
1335
+ );
1336
+ border-width: var(
1337
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-wh,
1338
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-dn-pt-ds-gt-cd-is-br-wh))
1339
+ );
1340
+ padding: var(
1341
+ --_ctm-mob-dn-pt-ds-gt-cd-is-pg,
1342
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-pg, var(--_ctm-dn-pt-ds-gt-cd-is-pg))
1343
+ );
1344
+ // width: 220px;
1345
+ transition:
1346
+ background-color 0.2s,
1347
+ color 0.2s,
1348
+ border-color 0.2s,
1349
+ box-shadow 0.2s;
1350
+ .svg_icon {
1351
+ color: var(--_gray-700);
1352
+ font-weight: 500;
1353
+ font-size: 14px;
1354
+ line-height: 24px;
1355
+ white-space: nowrap;
1356
+ position: absolute;
1357
+ top: 7px;
1358
+ }
1359
+ input {
1360
+ color: var(--_gray-700);
1361
+ margin-top: 2px;
1362
+ &::placeholder {
1363
+ font-family: var(
1364
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-fy,
1365
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-is-ft-fy))
1366
+ );
1367
+ text-transform: var(
1368
+ --_ctm-mob-dn-pt-ds-gt-cd-is-tt-tm,
1369
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-is-tt-tm))
1370
+ );
1371
+ word-wrap: var(
1372
+ --_ctm-mob-dn-pt-ds-gt-cd-is-wd-wp,
1373
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-is-wd-wp))
1374
+ );
1375
+ word-break: var(
1376
+ --_ctm-mob-dn-pt-ds-gt-cd-is-wd-bk,
1377
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-is-wd-bk))
1378
+ );
1379
+ color: var(
1380
+ --_ctm-mob-dn-pt-ds-gt-cd-is-cr,
1381
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-cr, var(--_ctm-dn-pt-ds-gt-cd-is-cr))
1382
+ );
1383
+ font-weight: var(
1384
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-wt,
1385
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-is-ft-wt))
1386
+ );
1387
+ font-size: var(
1388
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se,
1389
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se))
1390
+ );
1391
+ text-decoration: var(
1392
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ue,
1393
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ue, var(--_ctm-dn-pt-ds-gt-cd-is-ue))
1394
+ );
1395
+ letter-spacing: var(
1396
+ --_ctm-mob-dn-pt-ds-gt-cd-is-lr-sg,
1397
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-is-lr-sg))
1398
+ );
1399
+ line-height: var(
1400
+ --_ctm-mob-dn-pt-ds-gt-cd-is-le-ht,
1401
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-dn-pt-ds-gt-cd-is-le-ht))
1402
+ );
1403
+ font-style: var(
1404
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se-ic,
1405
+ var(
1406
+ --_ctm-tab-dn-pt-ds-gt-cd-is-ft-se-ic,
1407
+ var(--_ctm-dn-pt-ds-gt-cd-is-ft-se-ic)
1408
+ )
1409
+ );
1410
+ text-align: var(
1411
+ --_ctm-mob-dn-pt-ds-gt-cd-is-tt-an,
1412
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-dn-pt-ds-gt-cd-is-tt-an))
1413
+ );
1414
+ // color: var(--_gray-500);
1415
+ // font-weight: 500;
1416
+ // font-size: 14px;
1417
+ // line-height: 24px;
1418
+ }
1419
+ padding-left: 24px;
1420
+ }
1421
+ &:focus-within {
1422
+ outline: 0 none;
1423
+ outline-offset: 0;
1424
+ border-radius: 4px;
1425
+ box-shadow:
1426
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
1427
+ 0px 0px 0px 2px var(--_primary-100);
1428
+ border: 1px solid var(--_primary-300);
1429
+ }
1430
+ }
1431
+ }
1432
+ .delivery_details_container {
1433
+ display: flex;
1434
+ flex-direction: column;
1435
+ gap: var(
1436
+ --_ctm-mob-dn-pt-ds-gt-cd-cd-wr-im-gp,
1437
+ var(--_ctm-tab-dn-pt-ds-gt-cd-cd-wr-im-gp, var(--_ctm-dn-pt-ds-gt-cd-cd-wr-im-gp))
1438
+ );
1439
+ .delivery_details_title {
1440
+ display: inline-block;
1441
+ // margin-top: 8px;
1442
+ // margin-bottom: 4px;
1443
+ // font-size: 16px;
1444
+ // color: #000000;
1445
+ // font-weight: 500;
1446
+ // line-height: 150%;
1447
+ font-family: var(
1448
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-fy,
1449
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-fy))
1450
+ );
1451
+ text-transform: var(
1452
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-tt-tm,
1453
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-ts-tt-tm))
1454
+ );
1455
+ word-wrap: var(
1456
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-wd-wp,
1457
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-ts-wd-wp))
1458
+ );
1459
+ word-break: var(
1460
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-wd-bk,
1461
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-ts-wd-bk))
1462
+ );
1463
+ &.flex__overflow {
1464
+ white-space: normal;
1465
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1466
+ }
1467
+ color: var(
1468
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-cr,
1469
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-cr, var(--_ctm-dn-pt-ds-gt-cd-ts-cr))
1470
+ );
1471
+ font-weight: var(
1472
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-wt,
1473
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-wt))
1474
+ );
1475
+ font-size: var(
1476
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se,
1477
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se))
1478
+ );
1479
+ text-decoration: var(
1480
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ue,
1481
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ue, var(--_ctm-dn-pt-ds-gt-cd-ts-ue))
1482
+ );
1483
+ letter-spacing: var(
1484
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-lr-sg,
1485
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ts-lr-sg))
1486
+ );
1487
+ line-height: var(
1488
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-le-ht,
1489
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ts-le-ht))
1490
+ );
1491
+ font-style: var(
1492
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-ft-se-ic,
1493
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ts-ft-se-ic))
1494
+ );
1495
+ text-align: var(
1496
+ --_ctm-mob-dn-pt-ds-gt-cd-ts-tt-an,
1497
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ts-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ts-tt-an))
1498
+ );
1499
+ }
1500
+ .horizontal_line {
1501
+ // border: 1px solid #d0d5dd;
1502
+ // display: block;
1503
+ // width: 100%;
1504
+ // border-style: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-se);
1505
+ // border-color: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-cr);
1506
+ // border-width: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-wh);
1507
+ border-top: var(--_ctm-dn-pt-ds-gt-cd-dr-dr-wh) var(--_ctm-dn-pt-ds-gt-cd-dr-dr-se)
1508
+ var(--_ctm-dn-pt-ds-gt-cd-dr-dr-cr);
1509
+ }
1510
+ .input_container {
1511
+ display: flex;
1512
+ flex-direction: column;
1513
+ gap: 4px;
1514
+ // margin-bottom: 12px;
1515
+
1516
+ &:last-child {
1517
+ margin-bottom: 0;
1518
+ }
1519
+ label {
1520
+ display: block;
1521
+ font-family: var(
1522
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-fy,
1523
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-fy))
1524
+ );
1525
+ text-transform: var(
1526
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-tt-tm,
1527
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-ls-tt-tm))
1528
+ );
1529
+ word-wrap: var(
1530
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-wd-wp,
1531
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-ls-wd-wp))
1532
+ );
1533
+ word-break: var(
1534
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-wd-bk,
1535
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-ls-wd-bk))
1536
+ );
1537
+ &.flex__overflow {
1538
+ white-space: normal;
1539
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1540
+ }
1541
+ color: var(
1542
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-cr,
1543
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-cr, var(--_ctm-dn-pt-ds-gt-cd-ls-cr))
1544
+ );
1545
+ font-weight: var(
1546
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-wt,
1547
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-wt))
1548
+ );
1549
+ font-size: var(
1550
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se,
1551
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se))
1552
+ );
1553
+ text-decoration: var(
1554
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ue,
1555
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ue, var(--_ctm-dn-pt-ds-gt-cd-ls-ue))
1556
+ );
1557
+ letter-spacing: var(
1558
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-lr-sg,
1559
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-ls-lr-sg))
1560
+ );
1561
+ line-height: var(
1562
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-le-ht,
1563
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-le-ht, var(--_ctm-dn-pt-ds-gt-cd-ls-le-ht))
1564
+ );
1565
+ font-style: var(
1566
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-ft-se-ic,
1567
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-ft-se-ic, var(--_ctm-dn-pt-ds-gt-cd-ls-ft-se-ic))
1568
+ );
1569
+ text-align: var(
1570
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-tt-an,
1571
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-tt-an, var(--_ctm-dn-pt-ds-gt-cd-ls-tt-an))
1572
+ );
1573
+ padding: var(
1574
+ --_ctm-mob-dn-pt-ds-gt-cd-ls-pg,
1575
+ var(--_ctm-tab-dn-pt-ds-gt-cd-ls-pg, var(--_ctm-dn-pt-ds-gt-cd-ls-pg))
1576
+ );
1577
+ // color: var(--_gray-700);
1578
+ // font-weight: 400;
1579
+ // font-size: 14px;
1580
+ // line-height: 20px;
1581
+ }
1582
+ .message_text {
1583
+ resize: none;
1584
+ // background-color: var(--_base-white);
1585
+ // padding: 5px 12px;
1586
+ // border: 1px solid var(--_gray-300);
1587
+ // border-radius: 4px;
1588
+ background-color: var(
1589
+ --_ctm-mob-dn-pt-ds-gt-cd-is-bd-cr,
1590
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-is-bd-cr))
1591
+ );
1592
+
1593
+ border-color: var(
1594
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-cr,
1595
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-dn-pt-ds-gt-cd-is-br-cr))
1596
+ );
1597
+ border-radius: var(
1598
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-rs,
1599
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-dn-pt-ds-gt-cd-is-br-rs))
1600
+ );
1601
+ border-style: var(
1602
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-se,
1603
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-dn-pt-ds-gt-cd-is-br-se))
1604
+ );
1605
+ border-width: var(
1606
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-wh,
1607
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-dn-pt-ds-gt-cd-is-br-wh))
1608
+ );
1609
+ padding: var(
1610
+ --_ctm-mob-dn-pt-ds-gt-cd-is-pg,
1611
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-pg, var(--_ctm-dn-pt-ds-gt-cd-is-pg))
1612
+ );
1613
+ // margin-bottom: 8px;
1614
+ transition:
1615
+ background-color 0.2s,
1616
+ color 0.2s,
1617
+ border-color 0.2s,
1618
+ box-shadow 0.2s;
1619
+ height: 90px;
1620
+ &::placeholder {
1621
+ // color: var(--_gray-500);
1622
+ // font-weight: 500;
1623
+ // font-size: 14px;
1624
+ // line-height: 24px;
1625
+ font-family: var(
1626
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-fy,
1627
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-is-ft-fy))
1628
+ );
1629
+ text-transform: var(
1630
+ --_ctm-mob-dn-pt-ds-gt-cd-is-tt-tm,
1631
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-is-tt-tm))
1632
+ );
1633
+ word-wrap: var(
1634
+ --_ctm-mob-dn-pt-ds-gt-cd-is-wd-wp,
1635
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-is-wd-wp))
1636
+ );
1637
+ word-break: var(
1638
+ --_ctm-mob-dn-pt-ds-gt-cd-is-wd-bk,
1639
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-is-wd-bk))
1640
+ );
1641
+ color: var(
1642
+ --_ctm-mob-dn-pt-ds-gt-cd-is-cr,
1643
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-cr, var(--_ctm-dn-pt-ds-gt-cd-is-cr))
1644
+ );
1645
+ font-weight: var(
1646
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-wt,
1647
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-is-ft-wt))
1648
+ );
1649
+ font-size: var(
1650
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se,
1651
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se))
1652
+ );
1653
+ text-decoration: var(
1654
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ue,
1655
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ue, var(--_ctm-dn-pt-ds-gt-cd-is-ue))
1656
+ );
1657
+ letter-spacing: var(
1658
+ --_ctm-mob-dn-pt-ds-gt-cd-is-lr-sg,
1659
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-is-lr-sg))
1660
+ );
1661
+ line-height: var(
1662
+ --_ctm-mob-dn-pt-ds-gt-cd-is-le-ht,
1663
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-dn-pt-ds-gt-cd-is-le-ht))
1664
+ );
1665
+ font-style: var(
1666
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se-ic,
1667
+ var(
1668
+ --_ctm-tab-dn-pt-ds-gt-cd-is-ft-se-ic,
1669
+ var(--_ctm-dn-pt-ds-gt-cd-is-ft-se-ic)
1670
+ )
1671
+ );
1672
+ text-align: var(
1673
+ --_ctm-mob-dn-pt-ds-gt-cd-is-tt-an,
1674
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-dn-pt-ds-gt-cd-is-tt-an))
1675
+ );
1676
+ }
1677
+ &:focus {
1678
+ outline: 0 none;
1679
+ outline-offset: 0;
1680
+ border-radius: 4px;
1681
+ box-shadow:
1682
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
1683
+ 0px 0px 0px 2px var(--_primary-100);
1684
+ border: 1px solid var(--_primary-300);
1685
+ }
1686
+ }
1687
+ input {
1688
+ // background-color: var(--_base-white);
1689
+ // padding: 8px 12px;
1690
+ // border: 1px solid var(--_gray-300);
1691
+ // border-radius: 4px;
1692
+ background-color: var(
1693
+ --_ctm-mob-dn-pt-ds-gt-cd-is-bd-cr,
1694
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-bd-cr, var(--_ctm-dn-pt-ds-gt-cd-is-bd-cr))
1695
+ );
1696
+
1697
+ border-color: var(
1698
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-cr,
1699
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-cr, var(--_ctm-dn-pt-ds-gt-cd-is-br-cr))
1700
+ );
1701
+ border-radius: var(
1702
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-rs,
1703
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-rs, var(--_ctm-dn-pt-ds-gt-cd-is-br-rs))
1704
+ );
1705
+ border-style: var(
1706
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-se,
1707
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-se, var(--_ctm-dn-pt-ds-gt-cd-is-br-se))
1708
+ );
1709
+ border-width: var(
1710
+ --_ctm-mob-dn-pt-ds-gt-cd-is-br-wh,
1711
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-br-wh, var(--_ctm-dn-pt-ds-gt-cd-is-br-wh))
1712
+ );
1713
+ // padding: var(
1714
+ // --_ctm-mob-dn-pt-ds-gt-cd-is-pg,
1715
+ // var(--_ctm-tab-dn-pt-ds-gt-cd-is-pg, var(--_ctm-dn-pt-ds-gt-cd-is-pg))
1716
+ // );
1717
+ padding: 10px 12px 12px 12px;
1718
+
1719
+ transition:
1720
+ background-color 0.2s,
1721
+ color 0.2s,
1722
+ border-color 0.2s,
1723
+ box-shadow 0.2s;
1724
+ &::placeholder {
1725
+ // color: var(--_gray-500);
1726
+ // font-weight: 500;
1727
+ // font-size: 14px;
1728
+ // line-height: 24px;
1729
+ font-family: var(
1730
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-fy,
1731
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-fy, var(--_ctm-dn-pt-ds-gt-cd-is-ft-fy))
1732
+ );
1733
+ text-transform: var(
1734
+ --_ctm-mob-dn-pt-ds-gt-cd-is-tt-tm,
1735
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-tm, var(--_ctm-dn-pt-ds-gt-cd-is-tt-tm))
1736
+ );
1737
+ word-wrap: var(
1738
+ --_ctm-mob-dn-pt-ds-gt-cd-is-wd-wp,
1739
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-wp, var(--_ctm-dn-pt-ds-gt-cd-is-wd-wp))
1740
+ );
1741
+ word-break: var(
1742
+ --_ctm-mob-dn-pt-ds-gt-cd-is-wd-bk,
1743
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-wd-bk, var(--_ctm-dn-pt-ds-gt-cd-is-wd-bk))
1744
+ );
1745
+ color: var(
1746
+ --_ctm-mob-dn-pt-ds-gt-cd-is-cr,
1747
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-cr, var(--_ctm-dn-pt-ds-gt-cd-is-cr))
1748
+ );
1749
+ font-weight: var(
1750
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-wt,
1751
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-wt, var(--_ctm-dn-pt-ds-gt-cd-is-ft-wt))
1752
+ );
1753
+ font-size: var(
1754
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se,
1755
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ft-se, var(--_ctm-dn-pt-ds-gt-cd-is-ft-se))
1756
+ );
1757
+ text-decoration: var(
1758
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ue,
1759
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-ue, var(--_ctm-dn-pt-ds-gt-cd-is-ue))
1760
+ );
1761
+ letter-spacing: var(
1762
+ --_ctm-mob-dn-pt-ds-gt-cd-is-lr-sg,
1763
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-lr-sg, var(--_ctm-dn-pt-ds-gt-cd-is-lr-sg))
1764
+ );
1765
+ line-height: var(
1766
+ --_ctm-mob-dn-pt-ds-gt-cd-is-le-ht,
1767
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-le-ht, var(--_ctm-dn-pt-ds-gt-cd-is-le-ht))
1768
+ );
1769
+ font-style: var(
1770
+ --_ctm-mob-dn-pt-ds-gt-cd-is-ft-se-ic,
1771
+ var(
1772
+ --_ctm-tab-dn-pt-ds-gt-cd-is-ft-se-ic,
1773
+ var(--_ctm-dn-pt-ds-gt-cd-is-ft-se-ic)
1774
+ )
1775
+ );
1776
+ text-align: var(
1777
+ --_ctm-mob-dn-pt-ds-gt-cd-is-tt-an,
1778
+ var(--_ctm-tab-dn-pt-ds-gt-cd-is-tt-an, var(--_ctm-dn-pt-ds-gt-cd-is-tt-an))
1779
+ );
1780
+ }
1781
+ &:focus {
1782
+ outline: 0 none;
1783
+ outline-offset: 0;
1784
+ border-radius: 4px;
1785
+ box-shadow:
1786
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
1787
+ 0px 0px 0px 2px var(--_primary-100);
1788
+ border: 1px solid var(--_primary-300);
1789
+ }
1790
+ }
1791
+ .error_text {
1792
+ font-size: 12px;
1793
+ color: var(--_error-500);
1794
+ }
1795
+ }
1796
+ }
1797
+ }
1798
+ .product_qty_wrapper {
1799
+ display: flex;
1800
+ // width: 124px;
1801
+ flex-direction: column;
1802
+ align-items: flex-start;
1803
+ gap: 6px;
1804
+ width: 113px;
1805
+ margin-block: 12px;
1806
+
1807
+ .product_qty_container {
1808
+ display: flex;
1809
+ align-items: flex-start;
1810
+ align-self: stretch;
1811
+ border-radius: 4px;
1812
+ border: 0.5px solid var(--_thm-cs-be-se-3);
1813
+ background: #fff;
1814
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
1815
+ &:focus-within {
1816
+ outline: 2px solid var(--_gray-200);
1817
+ }
1818
+
1819
+ .product_qty_label {
1820
+ display: flex;
1821
+ padding: 8px 12px;
1822
+ align-items: center;
1823
+ border-radius: 8px 0px 0px 8px;
1824
+ p {
1825
+ color: var(--_thm-ty-p1-tt-cr);
1826
+ font-size: var(--_thm-ty-p1-ft-se);
1827
+ font-weight: var(--_thm-ty-p1-bd);
1828
+ // line-height: 24px;
1829
+ line-height: var(--_thm-ty-p1-le-ht);
1830
+ }
1831
+ }
1832
+ .product_qty_input_container {
1833
+ height: 40px;
1834
+ display: flex;
1835
+ // position: relative;
1836
+ width: 55px;
1837
+ border-radius: 0px 4px 4px 0px;
1838
+ background: transparent;
1839
+ border-left: 1px solid var(--_thm-cs-be-se-3);
1840
+ padding: 8px 12px;
1841
+ }
1842
+ .product_qty_number {
1843
+ // display: flex;
1844
+ // padding: 8px 12px;
1845
+ align-items: center;
1846
+ color: var(--_thm-ty-p2-tt-cr);
1847
+ font-size: var(--_thm-ty-p1-ft-se);
1848
+ font-weight: var(--_thm-ty-p1-bd);
1849
+ line-height: var(--_thm-ty-p1-le-ht);
1850
+ // gap: 8px;
1851
+ // flex: 1 0 0;
1852
+ // align-self: stretch;
1853
+ // border-radius: 0px 4px 4px 0px;
1854
+ // background: #fff;
1855
+ // border-left: 1px solid #d0d5dd;
1856
+ // max-width: 80px;
1857
+ text-align: center;
1858
+ width: 75%;
1859
+ &::-webkit-outer-spin-button,
1860
+ &::-webkit-inner-spin-button {
1861
+ -webkit-appearance: none;
1862
+ margin: 0;
1863
+ }
1864
+ }
1865
+ }
1866
+ }
1867
+ .add-to-cart {
1868
+ padding-top: 12px;
1869
+ padding-right: 24px;
1870
+ padding-bottom: 12px;
1871
+ padding-left: 24px;
1872
+ transition: background 200ms ease-in-out;
1873
+ span {
1874
+ display: flex;
1875
+ svg path {
1876
+ stroke: var(--_base-white);
1877
+ }
1878
+ }
1879
+ // padding: var(
1880
+ // --_ctm-mob-dn-pt-ds-at-pg,
1881
+ // var(--_ctm-tab-dn-pt-ds-at-pg, var(--_ctm-dn-pt-ds-at-pg))
1882
+ // );
1883
+ // border-style: var(
1884
+ // --_ctm-mob-dn-pt-ds-at-br-se,
1885
+ // var(--_ctm-tab-dn-pt-ds-at-br-se, var(--_ctm-dn-pt-ds-at-br-se))
1886
+ // );
1887
+ // border-width: var(
1888
+ // --_ctm-mob-dn-pt-ds-at-br-wh,
1889
+ // var(--_ctm-tab-dn-pt-ds-at-br-wh, var(--_ctm-dn-pt-ds-at-br-wh))
1890
+ // );
1891
+ // border-radius: var(
1892
+ // --_ctm-mob-dn-pt-ds-at-br-rs,
1893
+ // var(--_ctm-tab-dn-pt-ds-at-br-rs, var(--_ctm-dn-pt-ds-at-br-rs))
1894
+ // );
1895
+ // border-color: var(
1896
+ // --_ctm-mob-dn-pt-ds-at-br-cr,
1897
+ // var(--_ctm-tab-dn-pt-ds-at-br-cr, var(--_ctm-dn-pt-ds-at-br-cr))
1898
+ // );
1899
+ // background: var(
1900
+ // --_ctm-mob-dn-pt-ds-at-bd-cr,
1901
+ // var(--_ctm-tab-dn-pt-ds-at-bd-cr, var(--_ctm-dn-pt-ds-at-bd-cr))
1902
+ // );
1903
+ // box-shadow: 0px 1px 2px 0px #1018280d;
1904
+ // text-align: center;
1905
+ // font-family: var(
1906
+ // --_ctm-mob-dn-pt-ds-at-ft-fy,
1907
+ // var(--_ctm-tab-dn-pt-ds-at-ft-fy, var(--_ctm-dn-pt-ds-at-ft-fy))
1908
+ // );
1909
+ // font-weight: var(
1910
+ // --_ctm-mob-dn-pt-ds-at-ft-wt,
1911
+ // var(--_ctm-tab-dn-pt-ds-at-ft-wt, var(--_ctm-dn-pt-ds-at-ft-wt))
1912
+ // );
1913
+ // font-size: var(
1914
+ // --_ctm-mob-dn-pt-ds-at-ft-se,
1915
+ // var(--_ctm-tab-dn-pt-ds-at-ft-se, var(--_ctm-dn-pt-ds-at-ft-se))
1916
+ // );
1917
+ // line-height: var(
1918
+ // --_ctm-mob-dn-pt-ds-at-le-ht,
1919
+ // var(--_ctm-tab-dn-pt-ds-at-le-ht, var(--_ctm-dn-pt-ds-at-le-ht))
1920
+ // );
1921
+ // letter-spacing: var(
1922
+ // --_ctm-mob-dn-pt-ds-at-lr-sg,
1923
+ // var(--_ctm-tab-dn-pt-ds-at-lr-sg, var(--_ctm-dn-pt-ds-at-lr-sg))
1924
+ // );
1925
+ // color: var(
1926
+ // --_ctm-mob-dn-pt-ds-at-cr,
1927
+ // var(--_ctm-tab-dn-pt-ds-at-cr, var(--_ctm-dn-pt-ds-at-cr))
1928
+ // );
1929
+ // span {
1930
+ // vertical-align: middle;
1931
+ // }
1932
+ // button {
1933
+ // font-family: var(
1934
+ // --_ctm-mob-dn-pt-ds-at-ft-fy,
1935
+ // var(--_ctm-tab-dn-pt-ds-at-ft-fy, var(--_ctm-dn-pt-ds-at-ft-fy))
1936
+ // );
1937
+ // font-weight: var(
1938
+ // --_ctm-mob-dn-pt-ds-at-ft-wt,
1939
+ // var(--_ctm-tab-dn-pt-ds-at-ft-wt, var(--_ctm-dn-pt-ds-at-ft-wt))
1940
+ // );
1941
+ // font-size: var(
1942
+ // --_ctm-mob-dn-pt-ds-at-ft-se,
1943
+ // var(--_ctm-tab-dn-pt-ds-at-ft-se, var(--_ctm-dn-pt-ds-at-ft-se))
1944
+ // );
1945
+ // line-height: var(
1946
+ // --_ctm-mob-dn-pt-ds-at-le-ht,
1947
+ // var(--_ctm-tab-dn-pt-ds-at-le-ht, var(--_ctm-dn-pt-ds-at-le-ht))
1948
+ // );
1949
+ // letter-spacing: var(
1950
+ // --_ctm-mob-dn-pt-ds-at-lr-sg,
1951
+ // var(--_ctm-tab-dn-pt-ds-at-lr-sg, var(--_ctm-dn-pt-ds-at-lr-sg))
1952
+ // );
1953
+ // color: var(
1954
+ // --_ctm-mob-dn-pt-ds-at-cr,
1955
+ // var(--_ctm-tab-dn-pt-ds-at-cr, var(--_ctm-dn-pt-ds-at-cr))
1956
+ // );
1957
+ // }
1958
+ }
1959
+ }
1960
+
1961
+ @media (max-width: 768px) {
1962
+ grid-template-columns: 1fr;
1963
+ .customizer-panel {
1964
+ border-left: none;
1965
+ padding-left: 0;
1966
+ margin-top: 2rem;
1967
+ }
1968
+ }
1969
+ }
1970
+
1971
+ .embla {
1972
+ width: 100%;
1973
+ height: 100%;
1974
+ position: relative;
1975
+ display: flex;
1976
+ flex-direction: column;
1977
+ // padding: 20px;
1978
+ // overflow: hidden;
1979
+
1980
+ .embla__viewport {
1981
+ width: 100%;
1982
+ height: 100%;
1983
+ position: relative;
1984
+ display: flex;
1985
+ flex-direction: column;
1986
+
1987
+ overflow: hidden;
1988
+
1989
+ .embla__container {
1990
+ width: 100%;
1991
+ height: 100%;
1992
+ display: grid;
1993
+ grid-template-rows: 100%;
1994
+
1995
+ grid-template-columns: repeat(
1996
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
1997
+ calc(
1998
+ 100% /
1999
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
2000
+ )
2001
+ );
2002
+
2003
+ grid-auto-flow: column;
2004
+ gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
2005
+
2006
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
2007
+ height: calc(100% - calc(50px + 10px));
2008
+ }
2009
+
2010
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
2011
+ height: calc(100% - calc(50px + 20px));
2012
+ }
2013
+
2014
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
2015
+ height: calc(
2016
+ 100% - calc(
2017
+ var(
2018
+ --_ctm-mob-dn-pn-ds-dt-se,
2019
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2020
+ ) +
2021
+ 20px
2022
+ )
2023
+ );
2024
+ }
2025
+
2026
+ .embla__slide {
2027
+ width: 100%;
2028
+ height: 100%;
2029
+ & > img {
2030
+ width: 100%;
2031
+ height: 100%;
2032
+ object-fit: contain;
2033
+ }
2034
+ }
2035
+ }
2036
+ }
2037
+ &:not([data-display-style="Column"]) {
2038
+ .embla__container {
2039
+ grid-auto-columns: calc(
2040
+ 100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
2041
+ );
2042
+ }
2043
+ }
2044
+
2045
+ .arrow-navigation {
2046
+ display: flex;
2047
+ position: absolute;
2048
+ top: 50%;
2049
+ left: 50%;
2050
+ width: 100%;
2051
+ justify-content: space-between;
2052
+ transform: translate(-50%, -50%);
2053
+ // padding-left: 20px;
2054
+
2055
+ &[data-control-type="Bottom-Overflow"] {
2056
+ transform: translateX(-50%);
2057
+ width: 100%;
2058
+ justify-content: center;
2059
+ gap: 12px;
2060
+ top: unset;
2061
+ bottom: 6px;
2062
+ }
2063
+ &[data-control-type="Bottom"] {
2064
+ transform: unset;
2065
+ position: static;
2066
+ width: 100%;
2067
+ justify-content: center;
2068
+ gap: 12px;
2069
+ margin-top: 10px;
2070
+ }
2071
+ }
2072
+ &[data-control-type="Side"] {
2073
+ .left-button,
2074
+ .right-button {
2075
+ background-color: transparent;
2076
+ }
2077
+ }
2078
+ &[data-background-shape="Round"] {
2079
+ .left-button,
2080
+ .right-button {
2081
+ background-color: #f2f5f5;
2082
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
2083
+ }
2084
+ }
2085
+ .left-button {
2086
+ padding: 10px;
2087
+ border-radius: 50%;
2088
+ border: none;
2089
+ width: var(
2090
+ --_ctm-mob-dn-pn-as-aw-se,
2091
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2092
+ );
2093
+ height: var(
2094
+ --_ctm-mob-dn-pn-as-aw-se,
2095
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2096
+ );
2097
+
2098
+ display: flex;
2099
+ align-items: center;
2100
+ justify-content: center;
2101
+ cursor: pointer;
2102
+ outline: none;
2103
+ margin-left: 12px;
2104
+ &:disabled {
2105
+ & svg {
2106
+ path {
2107
+ stroke: #c3b7b7;
2108
+ }
2109
+ }
2110
+ }
2111
+ }
2112
+ .right-button {
2113
+ border-radius: 50%;
2114
+ border: none;
2115
+ width: var(
2116
+ --_ctm-mob-dn-pn-as-aw-se,
2117
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2118
+ );
2119
+ height: var(
2120
+ --_ctm-mob-dn-pn-as-aw-se,
2121
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2122
+ );
2123
+
2124
+ display: flex;
2125
+ align-items: center;
2126
+ justify-content: center;
2127
+ cursor: pointer;
2128
+ outline: none;
2129
+ margin-right: 12px;
2130
+ padding: 10px;
2131
+
2132
+ &:disabled {
2133
+ & svg {
2134
+ path {
2135
+ stroke: #c3b7b7;
2136
+ }
2137
+ }
2138
+ }
2139
+ }
2140
+ .icon {
2141
+ display: flex;
2142
+
2143
+ svg {
2144
+ width: calc(
2145
+ var(
2146
+ --_ctm-mob-dn-pn-as-aw-se,
2147
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2148
+ ) *
2149
+ 0.5
2150
+ );
2151
+ height: calc(
2152
+ var(
2153
+ --_ctm-mob-dn-pn-as-aw-se,
2154
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2155
+ ) *
2156
+ 0.5
2157
+ );
2158
+
2159
+ path {
2160
+ stroke: #514949;
2161
+ }
2162
+ }
2163
+ }
2164
+
2165
+ &[data-control-type="Side"] {
2166
+ .embla__viewport {
2167
+ width: calc(100% - 120px);
2168
+ margin-inline: auto;
2169
+ }
2170
+ .left-button {
2171
+ position: absolute;
2172
+ left: 0;
2173
+ top: 50%;
2174
+ transform: translateY(-50%);
2175
+ }
2176
+ .right-button {
2177
+ position: absolute;
2178
+
2179
+ right: 0;
2180
+ top: 50%;
2181
+ transform: translateY(-50%);
2182
+ }
2183
+ }
2184
+
2185
+ &[data-thumbnail-placement="top"] {
2186
+ flex-direction: column-reverse;
2187
+ }
2188
+ &[data-thumbnail-placement="bottom"] {
2189
+ flex-direction: column;
2190
+ }
2191
+ &[data-thumbnail-placement="left"] {
2192
+ flex-direction: row-reverse;
2193
+
2194
+ .embla__thumbs {
2195
+ width: var(--_ctm-lt-tl-se);
2196
+ height: 100%;
2197
+
2198
+ & .embla__thumbs__container {
2199
+ flex-direction: column;
2200
+ height: 100%;
2201
+ }
2202
+ }
2203
+ }
2204
+ &[data-thumbnail-placement="right"] {
2205
+ flex-direction: row;
2206
+ .embla__thumbs {
2207
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2208
+
2209
+ height: 100%;
2210
+
2211
+ & .embla__thumbs__container {
2212
+ flex-direction: column;
2213
+ height: 100%;
2214
+ }
2215
+ }
2216
+ }
2217
+ .embla__dots {
2218
+ display: flex;
2219
+ flex-wrap: wrap;
2220
+ justify-content: center;
2221
+ align-items: center;
2222
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
2223
+ gap: 6px;
2224
+
2225
+ &[data-control-type="Bottom-Overflow"] {
2226
+ position: absolute;
2227
+ bottom: 10px;
2228
+ left: 50%;
2229
+ transform: translateX(-50%);
2230
+ width: 75%;
2231
+ }
2232
+ .embla__dot {
2233
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
2234
+ -webkit-appearance: none;
2235
+ appearance: none;
2236
+ background-color: var(
2237
+ --_ctm-mob-dn-pn-ds-or-dt-cr,
2238
+ var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
2239
+ );
2240
+
2241
+ touch-action: manipulation;
2242
+ display: inline-flex;
2243
+ text-decoration: none;
2244
+ cursor: pointer;
2245
+ border: 0;
2246
+ padding: 0;
2247
+ margin: 0;
2248
+ // width: 0.6rem;
2249
+ // height: 0.6rem;
2250
+ width: var(
2251
+ --_ctm-mob-dn-pn-ds-dt-se,
2252
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2253
+ );
2254
+ height: var(
2255
+ --_ctm-mob-dn-pn-ds-dt-se,
2256
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2257
+ );
2258
+
2259
+ display: flex;
2260
+ align-items: center;
2261
+ justify-content: center;
2262
+ border-radius: 50%;
2263
+ }
2264
+ .embla__dot:after {
2265
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
2266
+ width: var(
2267
+ --_ctm-mob-dn-pn-ds-dt-se,
2268
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2269
+ );
2270
+ height: var(
2271
+ --_ctm-mob-dn-pn-ds-dt-se,
2272
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2273
+ );
2274
+
2275
+ border-radius: 50%;
2276
+ display: flex;
2277
+ align-items: center;
2278
+ content: "";
2279
+ }
2280
+ .embla__dot--selected:after {
2281
+ box-shadow: inset 0 0 0 1px var(--text-body);
2282
+ background-color: var(
2283
+ --_ctm-mob-dn-pn-ds-ct-dt-cr,
2284
+ var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
2285
+ );
2286
+ }
2287
+ &[data-slider-control="Pagination Line"] {
2288
+ .embla__dot {
2289
+ width: var(
2290
+ --_ctm-mob-dn-pn-le-le-wh,
2291
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
2292
+ );
2293
+ height: var(
2294
+ --_ctm-mob-dn-pn-le-le-ht,
2295
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2296
+ );
2297
+ background-color: var(
2298
+ --_ctm-mob-dn-pn-le-or-le-cr,
2299
+ var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
2300
+ );
2301
+ border-radius: 6px;
2302
+ }
2303
+
2304
+ .embla__dot--selected:after {
2305
+ box-shadow: inset 0 0 0 1px var(--text-body);
2306
+ border-radius: 6px;
2307
+ width: var(
2308
+ --_ctm-mob-dn-pn-le-le-wh,
2309
+ var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
2310
+ );
2311
+ height: var(
2312
+ --_ctm-mob-dn-pn-le-le-ht,
2313
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2314
+ );
2315
+ background-color: var(
2316
+ --_ctm-mob-dn-pn-le-ct-le-cr,
2317
+ var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
2318
+ );
2319
+ }
2320
+ }
2321
+ }
2322
+
2323
+ .embla__thumbs {
2324
+ width: 100%;
2325
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2326
+
2327
+ position: relative;
2328
+ display: grid;
2329
+ grid-template-columns: 1fr;
2330
+ overflow: hidden;
2331
+ // margin: 10px;
2332
+ padding: 10px;
2333
+
2334
+ .embla__thumbs__viewport {
2335
+ width: 100%;
2336
+ height: 100%;
2337
+ position: relative;
2338
+ display: flex;
2339
+ flex-direction: column;
2340
+
2341
+ overflow: hidden;
2342
+ }
2343
+ .embla__thumbs__container {
2344
+ display: flex;
2345
+ flex-direction: row;
2346
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
2347
+ gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));
2348
+
2349
+ width: 100%;
2350
+ // justify-content: center;
2351
+ // height: 200px;
2352
+
2353
+ .embla__thumbs__slide {
2354
+ min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2355
+ max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2356
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2357
+
2358
+ & img {
2359
+ width: 100%;
2360
+ height: 100%;
2361
+ }
2362
+ }
2363
+ }
2364
+ }
2365
+ }
2366
+
2367
+ // for bundle details
2368
+ }
2369
+ }
2370
+ .text_ellipsis {
2371
+ display: -webkit-box;
2372
+ -webkit-box-orient: vertical;
2373
+ -webkit-line-clamp: 1;
2374
+ line-clamp: 1;
2375
+ white-space: normal;
2376
+ overflow: hidden;
2377
+ }