@sc-360-v2/storefront-cms-library 0.1.91 → 0.1.92

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 (63) hide show
  1. package/README.md +12 -12
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-variant-picker.scss +24 -0
  4. package/dist/cart.scss +18 -0
  5. package/dist/container.scss +11 -1
  6. package/dist/gallery-slider-temp.scss +12 -1
  7. package/dist/global.scss +4 -0
  8. package/dist/globals.scss +94 -94
  9. package/dist/icons.js +1 -1
  10. package/dist/index.js +1 -1
  11. package/dist/lightbox.scss +62 -0
  12. package/dist/modal.module.scss +121 -0
  13. package/dist/payment-methods.scss +7 -27
  14. package/dist/product-actions.scss +125 -141
  15. package/dist/product-basic-elements.scss +98 -37
  16. package/dist/product-price.scss +369 -1
  17. package/dist/product.scss +182 -0
  18. package/dist/profile.scss +18 -0
  19. package/dist/quantity-selector.scss +1 -1
  20. package/dist/section.scss +30 -0
  21. package/dist/stack.scss +72 -0
  22. package/dist/text-editor.scss +3 -0
  23. package/dist/types/builder/elements/cart/index.d.ts +26 -0
  24. package/dist/types/builder/elements/common.d.ts +1 -1
  25. package/dist/types/builder/elements/gallery-slider/index.d.ts +2 -2
  26. package/dist/types/builder/elements/lightbox/index.d.ts +36 -19
  27. package/dist/types/builder/elements/product/index.d.ts +30 -0
  28. package/dist/types/builder/elements/profile/index.d.ts +26 -0
  29. package/dist/types/builder/elements/repeater/index.d.ts +61 -0
  30. package/dist/types/builder/enums/index.d.ts +67 -3
  31. package/dist/types/builder/index.d.ts +5 -1
  32. package/dist/types/builder/tools/element-edit/amountEstimator.d.ts +105 -2
  33. package/dist/types/builder/tools/element-edit/bulkVariantPicker.d.ts +2 -1
  34. package/dist/types/builder/tools/element-edit/button.d.ts +3 -1
  35. package/dist/types/builder/tools/element-edit/common.d.ts +2 -0
  36. package/dist/types/builder/tools/element-edit/container.d.ts +2 -1
  37. package/dist/types/builder/tools/element-edit/gallery-slider.d.ts +9 -0
  38. package/dist/types/builder/tools/element-edit/image.d.ts +2 -1
  39. package/dist/types/builder/tools/element-edit/index.d.ts +7 -1
  40. package/dist/types/builder/tools/element-edit/menu.d.ts +53 -0
  41. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +5 -2
  42. package/dist/types/builder/tools/element-edit/pickupLocations.d.ts +65 -1
  43. package/dist/types/builder/tools/element-edit/product-image.d.ts +10 -0
  44. package/dist/types/builder/tools/element-edit/product.d.ts +17 -0
  45. package/dist/types/builder/tools/element-edit/productActions.d.ts +4 -1
  46. package/dist/types/builder/tools/element-edit/productHighlights.d.ts +2 -1
  47. package/dist/types/builder/tools/element-edit/productInventory.d.ts +96 -2
  48. package/dist/types/builder/tools/element-edit/productPrice.d.ts +2 -1
  49. package/dist/types/builder/tools/element-edit/productPromotions.d.ts +115 -2
  50. package/dist/types/builder/tools/element-edit/quantitySelector.d.ts +2 -1
  51. package/dist/types/builder/tools/element-edit/repeater.d.ts +38 -0
  52. package/dist/types/builder/tools/element-edit/repeaterItem.d.ts +9 -0
  53. package/dist/types/builder/tools/element-edit/shippingEstimator.d.ts +2 -1
  54. package/dist/types/builder/tools/element-edit/stack.d.ts +2 -1
  55. package/dist/types/builder/tools/element-edit/storeLocations.d.ts +63 -1
  56. package/dist/types/builder/tools/element-edit/text.d.ts +2 -1
  57. package/dist/types/builder/tools/element-edit/uomSelector.d.ts +123 -4
  58. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +149 -2
  59. package/dist/types/builder/tools/element-edit/volumePricing.d.ts +2 -1
  60. package/dist/types/global/types.d.ts +1 -0
  61. package/dist/variant-picker.scss +24 -0
  62. package/dist/volume-pricing.scss +3 -2
  63. package/package.json +1 -1
@@ -17,6 +17,7 @@
17
17
  // --_aspect-ratio: calc(
18
18
  // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
19
19
  // );
20
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
20
21
 
21
22
  & > .wrapper {
22
23
  width: 100%;
@@ -25,6 +26,9 @@
25
26
  &[data-show-shadow="false"] {
26
27
  --_show-shadow: none;
27
28
  }
29
+ &[data-show-border="false"] {
30
+ --_show-border: none;
31
+ }
28
32
 
29
33
  .text-element {
30
34
  background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
@@ -35,18 +39,25 @@
35
39
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
36
40
  row-gap: var(--_sf-gp);
37
41
  width: 100%;
38
- // height: 100%;
39
- border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
40
- border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
41
- border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
42
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
43
+ border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
44
+ border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
45
+ border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
42
46
  border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
43
47
  box-shadow: var(
44
48
  --_show-shadow,
45
49
  var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
46
50
  var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
47
51
  );
48
-
49
- // transform: scale(var(--_ctm-dn-zm-ie));
52
+ color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
53
+ font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
54
+ font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
55
+ font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
56
+ font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
57
+ text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
58
+ letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
59
+ line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
60
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
50
61
  scale: var(--_ctm-dn-zm-ie);
51
62
  &[data-flip-x="true"] {
52
63
  transform: scaleX(-1);
@@ -79,6 +90,9 @@
79
90
  &[data-show-shadow="false"] {
80
91
  --_show-shadow: none;
81
92
  }
93
+ &[data-show-border="false"] {
94
+ --_show-border: none;
95
+ }
82
96
 
83
97
  .text-element {
84
98
  background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
@@ -89,18 +103,25 @@
89
103
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
90
104
  row-gap: var(--_sf-gp);
91
105
  width: 100%;
92
- // height: 100%;
93
- border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
94
- border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
95
- border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
106
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
107
+ border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
108
+ border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
109
+ border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
96
110
  border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
97
111
  box-shadow: var(
98
112
  --_show-shadow,
99
113
  var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
100
114
  var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
101
115
  );
102
-
103
- // transform: scale(var(--_ctm-dn-zm-ie));
116
+ color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
117
+ font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
118
+ font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
119
+ font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
120
+ font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
121
+ text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
122
+ letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
123
+ line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
124
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
104
125
  scale: var(--_ctm-dn-zm-ie);
105
126
  &[data-flip-x="true"] {
106
127
  transform: scaleX(-1);
@@ -133,6 +154,9 @@
133
154
  &[data-show-shadow="false"] {
134
155
  --_show-shadow: none;
135
156
  }
157
+ &[data-show-border="false"] {
158
+ --_show-border: none;
159
+ }
136
160
 
137
161
  .text-element {
138
162
  background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
@@ -143,18 +167,25 @@
143
167
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
144
168
  row-gap: var(--_sf-gp);
145
169
  width: 100%;
146
- // height: 100%;
147
- border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
148
- border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
149
- border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
170
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
171
+ border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
172
+ border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
173
+ border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
150
174
  border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
151
175
  box-shadow: var(
152
176
  --_show-shadow,
153
177
  var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
154
178
  var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
155
179
  );
156
-
157
- // transform: scale(var(--_ctm-dn-zm-ie));
180
+ color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
181
+ font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
182
+ font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
183
+ font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
184
+ font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
185
+ text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
186
+ letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
187
+ line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
188
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
158
189
  scale: var(--_ctm-dn-zm-ie);
159
190
  &[data-flip-x="true"] {
160
191
  transform: scaleX(-1);
@@ -173,7 +204,7 @@
173
204
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
174
205
  width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
175
206
  margin: var(--_ctm-lt-mn, --_tst-lt-mn);
176
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
207
+ height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
177
208
  // height: ;
178
209
  // aspect-ratio: 1 / var(--_sf-aspect-ratio);
179
210
  // --_aspect-ratio: calc(
@@ -187,6 +218,9 @@
187
218
  &[data-show-shadow="false"] {
188
219
  --_show-shadow: none;
189
220
  }
221
+ &[data-show-border="false"] {
222
+ --_show-border: none;
223
+ }
190
224
 
191
225
  .text-element {
192
226
  background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
@@ -197,18 +231,25 @@
197
231
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
198
232
  row-gap: var(--_sf-gp);
199
233
  width: 100%;
200
- // height: 100%;
201
- border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
202
- border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
203
- border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
234
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
235
+ border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
236
+ border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
237
+ border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
204
238
  border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
205
239
  box-shadow: var(
206
240
  --_show-shadow,
207
241
  var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
208
242
  var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
209
243
  );
210
-
211
- // transform: scale(var(--_ctm-dn-zm-ie));
244
+ color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
245
+ font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
246
+ font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
247
+ font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
248
+ font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
249
+ text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
250
+ letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
251
+ line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
252
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
212
253
  scale: var(--_ctm-dn-zm-ie);
213
254
  &[data-flip-x="true"] {
214
255
  transform: scaleX(-1);
@@ -241,6 +282,9 @@
241
282
  &[data-show-shadow="false"] {
242
283
  --_show-shadow: none;
243
284
  }
285
+ &[data-show-border="false"] {
286
+ --_show-border: none;
287
+ }
244
288
 
245
289
  .text-element {
246
290
  background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
@@ -251,18 +295,25 @@
251
295
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
252
296
  row-gap: var(--_sf-gp);
253
297
  width: 100%;
254
- // height: 100%;
255
- border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
256
- border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
257
- border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
298
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
299
+ border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
300
+ border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
301
+ border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
258
302
  border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
259
303
  box-shadow: var(
260
304
  --_show-shadow,
261
305
  var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
262
306
  var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
263
307
  );
264
-
265
- // transform: scale(var(--_ctm-dn-zm-ie));
308
+ color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
309
+ font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
310
+ font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
311
+ font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
312
+ font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
313
+ text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
314
+ letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
315
+ line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
316
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
266
317
  scale: var(--_ctm-dn-zm-ie);
267
318
  &[data-flip-x="true"] {
268
319
  transform: scaleX(-1);
@@ -295,6 +346,9 @@
295
346
  &[data-show-shadow="false"] {
296
347
  --_show-shadow: none;
297
348
  }
349
+ &[data-show-border="false"] {
350
+ --_show-border: none;
351
+ }
298
352
 
299
353
  .text-element {
300
354
  background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
@@ -305,18 +359,25 @@
305
359
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
306
360
  row-gap: var(--_sf-gp);
307
361
  width: 100%;
308
- // height: 100%;
309
- border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
310
- border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
311
- border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
362
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
363
+ border-color: var(--_show-border, var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr)));
364
+ border-style: var(--_show-border, var(--_ctm-dn-br-se, var(--_tst-dn-br-se)));
365
+ border-width: var(--_show-border, var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh)));
312
366
  border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
313
367
  box-shadow: var(
314
368
  --_show-shadow,
315
369
  var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
316
370
  var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
317
371
  );
318
-
319
- // transform: scale(var(--_ctm-dn-zm-ie));
372
+ color: var(--_ctm-dn-cr, var(--_tst-dn-dt-se-cr));
373
+ font-family: var(--_ctm-dn-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
374
+ font-size: var(--_ctm-dn-ft-se, var(--_tst-dn-dt-se-ft-se));
375
+ font-weight: var(--_ctm-dn-ft-wt, var(--_tst-dn-dt-se-ft-wt));
376
+ font-style: var(--_ctm-dn-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
377
+ text-align: var(--_ctm-dn-tt-an, var(--_tst-dn-dt-se-tt-an));
378
+ letter-spacing: var(-_ctm-dn-lr-sg, var(--_tst-dn-dt-se-lr-sg));
379
+ line-height: var(--_ctm-dn-le-ht, var(--_tst-dn-dt-se-le-ht));
380
+ text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
320
381
  scale: var(--_ctm-dn-zm-ie);
321
382
  &[data-flip-x="true"] {
322
383
  transform: scaleX(-1);
@@ -26,7 +26,7 @@
26
26
  }
27
27
 
28
28
  .price-text-element {
29
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
29
+ // background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
30
30
  padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
31
31
  display: flex;
32
32
  flex-direction: column;
@@ -64,6 +64,374 @@
64
64
  text-underline-position: from-font;
65
65
  text-decoration-skip-ink: none;
66
66
  }
67
+ .element-container {
68
+ display: flex;
69
+ align-items: center;
70
+ gap: 10px;
71
+ .product-price {
72
+ .price-span {
73
+ background-color: var(--_ctm-dn-pt-pe-bd-cr);
74
+ color: var(--_ctm-dn-pt-pe-cr, var(--_tst-dn-dt-se-cr));
75
+ font-family: var(--_ctm-dn-pt-pe-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
76
+ font-size: var(--_ctm-dn-pt-pe-ft-se, var(--_tst-dn-dt-se-ft-se));
77
+ font-weight: var(--_ctm-dn-pt-pe-ft-wt, var(--_tst-dn-dt-se-ft-wt));
78
+ font-style: var(--_ctm-dn-pt-pe-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
79
+ text-align: var(--_ctm-dn-pt-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
80
+ letter-spacing: var(--_ctm-dn-pt-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
81
+ line-height: var(--_ctm-dn-pt-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
82
+ text-decoration: var(--_ctm-dn-pt-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
83
+ border-color: var(--_show-border, var(--_ctm-dn-pt-pe-br-cr, var(--_tst-dn-br-cr)));
84
+ border-style: var(--_show-border, var(--_ctm-dn-pt-pe-br-se, var(--_tst-dn-br-se)));
85
+ border-width: var(--_show-border, var(--_ctm-dn-pt-pe-br-wh, var(--_tst-dn-br-wh)));
86
+ border-radius: var(--_ctm-dn-pt-pe-br-rs, var(--_tst-dn-br-rs));
87
+ box-shadow: var(
88
+ --_show-shadow,
89
+ var(--_ctm-dn-pt-pe-sw-ae, var(--_tst-dn-sw-ae))
90
+ var(--_ctm-dn-pt-pe-sw-br, var(--_tst-dn-sw-br))
91
+ var(--_ctm-dn-pt-pe-sw-sd, var(--_tst-dn-sw-sd))
92
+ var(--_ctm-dn-pt-pe-sw-cr, var(--_tst-dn-sw-cr))
93
+ );
94
+ }
95
+ .code-span {
96
+ background-color: var(--_ctm-dn-cy-ce-se-bd-cr);
97
+ color: var(--_ctm-dn-cy-ce-se-cr, var(--_tst-dn-dt-se-cr));
98
+ font-family: var(--_ctm-dn-cy-ce-se-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
99
+ font-size: var(--_ctm-dn-cy-ce-se-ft-se, var(--_tst-dn-dt-se-ft-se));
100
+ font-weight: var(--_ctm-dn-cy-ce-se-ft-wt, var(--_tst-dn-dt-se-ft-wt));
101
+ font-style: var(--_ctm-dn-cy-ce-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
102
+ text-align: var(--_ctm-dn-cy-ce-se-tt-an, var(--_tst-dn-dt-se-tt-an));
103
+ letter-spacing: var(--_ctm-dn-cy-ce-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
104
+ line-height: var(--_ctm-dn-cy-ce-se-le-ht, var(--_tst-dn-dt-se-le-ht));
105
+ text-decoration: var(--_ctm-dn-cy-ce-se-tt-de, var(--_tst-dn-dt-se-tt-de));
106
+ border-color: var(--_show-border, var(--_ctm-dn-cy-ce-se-br-cr, var(--_tst-dn-br-cr)));
107
+ border-style: var(--_show-border, var(--_ctm-dn-cy-ce-se-br-se, var(--_tst-dn-br-se)));
108
+ border-width: var(--_show-border, var(--_ctm-dn-cy-ce-se-br-wh, var(--_tst-dn-br-wh)));
109
+ border-radius: var(--_ctm-dn-cy-ce-se-br-rs, var(--_tst-dn-br-rs));
110
+ box-shadow: var(
111
+ --_show-shadow,
112
+ var(--_ctm-dn-cy-ce-se-sw-ae, var(--_tst-dn-sw-ae))
113
+ var(--_ctm-dn-cy-ce-se-sw-br, var(--_tst-dn-sw-br))
114
+ var(--_ctm-dn-cy-ce-se-sw-sd, var(--_tst-dn-sw-sd))
115
+ var(--_ctm-dn-cy-ce-se-sw-cr, var(--_tst-dn-sw-cr))
116
+ );
117
+ }
118
+ .uom-span {
119
+ background-color: var(--_ctm-dn-um-se-bd-cr);
120
+ color: var(--_ctm-dn-um-se-cr, var(--_tst-dn-dt-se-cr));
121
+ font-family: var(--_ctm-dn-um-se-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
122
+ font-size: var(--_ctm-dn-um-se-ft-se, var(--_tst-dn-dt-se-ft-se));
123
+ font-weight: var(--_ctm-dn-um-se-ft-wt, var(--_tst-dn-dt-se-ft-wt));
124
+ font-style: var(--_ctm-dn-um-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
125
+ text-align: var(--_ctm-dn-um-se-tt-an, var(--_tst-dn-dt-se-tt-an));
126
+ letter-spacing: var(--_ctm-dn-um-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
127
+ line-height: var(--_ctm-dn-um-se-le-ht, var(--_tst-dn-dt-se-le-ht));
128
+ text-decoration: var(--_ctm-dn-um-se-tt-de, var(--_tst-dn-dt-se-tt-de));
129
+ border-color: var(--_show-border, var(--_ctm-dn-um-se-br-cr, var(--_tst-dn-br-cr)));
130
+ border-style: var(--_show-border, var(--_ctm-dn-um-se-br-se, var(--_tst-dn-br-se)));
131
+ border-width: var(--_show-border, var(--_ctm-dn-um-se-br-wh, var(--_tst-dn-br-wh)));
132
+ border-radius: var(--_ctm-dn-um-se-br-rs, var(--_tst-dn-br-rs));
133
+ box-shadow: var(
134
+ --_show-shadow,
135
+ var(--_ctm-dn-um-se-sw-ae, var(--_tst-dn-sw-ae))
136
+ var(--_ctm-dn-um-se-sw-br, var(--_tst-dn-sw-br))
137
+ var(--_ctm-dn-um-se-sw-sd, var(--_tst-dn-sw-sd))
138
+ var(--_ctm-dn-um-se-sw-cr, var(--_tst-dn-sw-cr))
139
+ );
140
+ }
141
+ }
142
+ .product-actual-price-container {
143
+ .product-actual-discount {
144
+ .discount-percentage {
145
+ background-color: var(--_ctm-dn-dt-bd-cr);
146
+ color: var(--_ctm-dn-dt-cr, var(--_tst-dn-dt-se-cr));
147
+ font-family: var(--_ctm-dn-dt-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
148
+ font-size: var(--_ctm-dn-dt-ft-se, var(--_tst-dn-dt-se-ft-se));
149
+ font-weight: var(--_ctm-dn-dt-ft-wt, var(--_tst-dn-dt-se-ft-wt));
150
+ font-style: var(--_ctm-dn-dt-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
151
+ text-align: var(--_ctm-dn-dt-tt-an, var(--_tst-dn-dt-se-tt-an));
152
+ letter-spacing: var(--_ctm-dn-dt-lr-sg, var(--_tst-dn-dt-se-lr-sg));
153
+ line-height: var(--_ctm-dn-dt-le-ht, var(--_tst-dn-dt-se-le-ht));
154
+ text-decoration: var(--_ctm-dn-dt-tt-de, var(--_tst-dn-dt-se-tt-de));
155
+ border-color: var(--_show-border, var(--_ctm-dn-dt-br-cr, var(--_tst-dn-br-cr)));
156
+ border-style: var(--_show-border, var(--_ctm-dn-dt-br-se, var(--_tst-dn-br-se)));
157
+ border-width: var(--_show-border, var(--_ctm-dn-dt-br-wh, var(--_tst-dn-br-wh)));
158
+ border-radius: var(--_ctm-dn-dt-br-rs, var(--_tst-dn-br-rs));
159
+ box-shadow: var(
160
+ --_show-shadow,
161
+ var(--_ctm-dn-dt-sw-ae, var(--_tst-dn-sw-ae))
162
+ var(--_ctm-dn-dt-sw-br, var(--_tst-dn-sw-br))
163
+ var(--_ctm-dn-dt-sw-sd, var(--_tst-dn-sw-sd))
164
+ var(--_ctm-dn-dt-sw-cr, var(--_tst-dn-sw-cr))
165
+ );
166
+ }
167
+ .discount-value-percentage {
168
+ background-color: var(--_ctm-dn-dt-ve-bd-cr);
169
+ color: var(--_ctm-dn-dt-ve-cr, var(--_tst-dn-dt-se-cr));
170
+ font-family: var(--_ctm-dn-dt-ve-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
171
+ font-size: var(--_ctm-dn-dt-ve-ft-se, var(--_tst-dn-dt-se-ft-se));
172
+ font-weight: var(--_ctm-dn-dt-ve-ft-wt, var(--_tst-dn-dt-se-ft-wt));
173
+ font-style: var(--_ctm-dn-dt-ve-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
174
+ text-align: var(--_ctm-dn-dt-ve-tt-an, var(--_tst-dn-dt-se-tt-an));
175
+ letter-spacing: var(--_ctm-dn-dt-ve-lr-sg, var(--_tst-dn-dt-se-lr-sg));
176
+ line-height: var(--_ctm-dn-dt-ve-le-ht, var(--_tst-dn-dt-se-le-ht));
177
+ text-decoration: var(--_ctm-dn-dt-ve-tt-de, var(--_tst-dn-dt-se-tt-de));
178
+ border-color: var(--_show-border, var(--_ctm-dn-dt-ve-br-cr, var(--_tst-dn-br-cr)));
179
+ border-style: var(--_show-border, var(--_ctm-dn-dt-ve-br-se, var(--_tst-dn-br-se)));
180
+ border-width: var(--_show-border, var(--_ctm-dn-dt-ve-br-wh, var(--_tst-dn-br-wh)));
181
+ border-radius: var(--_ctm-dn-dt-ve-br-rs, var(--_tst-dn-br-rs));
182
+ box-shadow: var(
183
+ --_show-shadow,
184
+ var(--_ctm-dn-dt-ve-sw-ae, var(--_tst-dn-sw-ae))
185
+ var(--_ctm-dn-dt-ve-sw-br, var(--_tst-dn-sw-br))
186
+ var(--_ctm-dn-dt-ve-sw-sd, var(--_tst-dn-sw-sd))
187
+ var(--_ctm-dn-dt-ve-sw-cr, var(--_tst-dn-sw-cr))
188
+ );
189
+ }
190
+ }
191
+ .product-actual-price {
192
+ .actual-price-span {
193
+ background-color: var(--_ctm-dn-al-pe-bd-cr);
194
+ color: var(--_ctm-dn-al-pe-cr, var(--_tst-dn-dt-se-cr));
195
+ font-family: var(--_ctm-dn-al-pe-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
196
+ font-size: var(--_ctm-dn-al-pe-ft-se, var(--_tst-dn-dt-se-ft-se));
197
+ font-weight: var(--_ctm-dn-al-pe-ft-wt, var(--_tst-dn-dt-se-ft-wt));
198
+ font-style: var(--_ctm-dn-al-pe-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
199
+ text-align: var(--_ctm-dn-al-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
200
+ letter-spacing: var(--_ctm-dn-al-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
201
+ line-height: var(--_ctm-dn-al-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
202
+ text-decoration: var(--_ctm-dn-al-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
203
+ border-color: var(--_show-border, var(--_ctm-dn-al-pe-br-cr, var(--_tst-dn-br-cr)));
204
+ border-style: var(--_show-border, var(--_ctm-dn-al-pe-br-se, var(--_tst-dn-br-se)));
205
+ border-width: var(--_show-border, var(--_ctm-dn-al-pe-br-wh, var(--_tst-dn-br-wh)));
206
+ border-radius: var(--_ctm-dn-al-pe-br-rs, var(--_tst-dn-br-rs));
207
+ box-shadow: var(
208
+ --_show-shadow,
209
+ var(--_ctm-dn-al-pe-sw-ae, var(--_tst-dn-sw-ae))
210
+ var(--_ctm-dn-al-pe-sw-br, var(--_tst-dn-sw-br))
211
+ var(--_ctm-dn-al-pe-sw-sd, var(--_tst-dn-sw-sd))
212
+ var(--_ctm-dn-al-pe-sw-cr, var(--_tst-dn-sw-cr))
213
+ );
214
+ }
215
+ .code-span {
216
+ background-color: var(--_ctm-dn-cy-ce-se-bd-cr);
217
+ color: var(--_ctm-dn-cy-ce-se-cr, var(--_tst-dn-dt-se-cr));
218
+ font-family: var(--_ctm-dn-cy-ce-se-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
219
+ font-size: var(--_ctm-dn-cy-ce-se-ft-se, var(--_tst-dn-dt-se-ft-se));
220
+ font-weight: var(--_ctm-dn-cy-ce-se-ft-wt, var(--_tst-dn-dt-se-ft-wt));
221
+ font-style: var(--_ctm-dn-cy-ce-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
222
+ text-align: var(--_ctm-dn-cy-ce-se-tt-an, var(--_tst-dn-dt-se-tt-an));
223
+ letter-spacing: var(--_ctm-dn-cy-ce-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
224
+ line-height: var(--_ctm-dn-cy-ce-se-le-ht, var(--_tst-dn-dt-se-le-ht));
225
+ text-decoration: var(--_ctm-dn-cy-ce-se-tt-de, var(--_tst-dn-dt-se-tt-de));
226
+ border-color: var(
227
+ --_show-border,
228
+ var(--_ctm-dn-cy-ce-se-br-cr, var(--_tst-dn-br-cr))
229
+ );
230
+ border-style: var(
231
+ --_show-border,
232
+ var(--_ctm-dn-cy-ce-se-br-se, var(--_tst-dn-br-se))
233
+ );
234
+ border-width: var(
235
+ --_show-border,
236
+ var(--_ctm-dn-cy-ce-se-br-wh, var(--_tst-dn-br-wh))
237
+ );
238
+ border-radius: var(--_ctm-dn-cy-ce-se-br-rs, var(--_tst-dn-br-rs));
239
+ box-shadow: var(
240
+ --_show-shadow,
241
+ var(--_ctm-dn-cy-ce-se-sw-ae, var(--_tst-dn-sw-ae))
242
+ var(--_ctm-dn-cy-ce-se-sw-br, var(--_tst-dn-sw-br))
243
+ var(--_ctm-dn-cy-ce-se-sw-sd, var(--_tst-dn-sw-sd))
244
+ var(--_ctm-dn-cy-ce-se-sw-cr, var(--_tst-dn-sw-cr))
245
+ );
246
+ }
247
+ .uom-span {
248
+ background-color: var(--_ctm-dn-um-se-bd-cr);
249
+ color: var(--_ctm-dn-um-se-cr, var(--_tst-dn-dt-se-cr));
250
+ font-family: var(--_ctm-dn-um-se-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
251
+ font-size: var(--_ctm-dn-um-se-ft-se, var(--_tst-dn-dt-se-ft-se));
252
+ font-weight: var(--_ctm-dn-um-se-ft-wt, var(--_tst-dn-dt-se-ft-wt));
253
+ font-style: var(--_ctm-dn-um-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
254
+ text-align: var(--_ctm-dn-um-se-tt-an, var(--_tst-dn-dt-se-tt-an));
255
+ letter-spacing: var(--_ctm-dn-um-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
256
+ line-height: var(--_ctm-dn-um-se-le-ht, var(--_tst-dn-dt-se-le-ht));
257
+ text-decoration: var(--_ctm-dn-um-se-tt-de, var(--_tst-dn-dt-se-tt-de));
258
+ border-color: var(--_show-border, var(--_ctm-dn-um-se-br-cr, var(--_tst-dn-br-cr)));
259
+ border-style: var(--_show-border, var(--_ctm-dn-um-se-br-se, var(--_tst-dn-br-se)));
260
+ border-width: var(--_show-border, var(--_ctm-dn-um-se-br-wh, var(--_tst-dn-br-wh)));
261
+ border-radius: var(--_ctm-dn-um-se-br-rs, var(--_tst-dn-br-rs));
262
+ box-shadow: var(
263
+ --_show-shadow,
264
+ var(--_ctm-dn-um-se-sw-ae, var(--_tst-dn-sw-ae))
265
+ var(--_ctm-dn-um-se-sw-br, var(--_tst-dn-sw-br))
266
+ var(--_ctm-dn-um-se-sw-sd, var(--_tst-dn-sw-sd))
267
+ var(--_ctm-dn-um-se-sw-cr, var(--_tst-dn-sw-cr))
268
+ );
269
+ }
270
+ }
271
+ }
272
+ .product-savings {
273
+ .product-savings-wrapper {
274
+ .savings-percent-span {
275
+ background-color: var(--_ctm-dn-ss-bd-cr);
276
+ color: var(--_ctm-dn-ss-cr, var(--_tst-dn-dt-se-cr));
277
+ font-family: var(--_ctm-dn-ss-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
278
+ font-size: var(--_ctm-dn-ss-ft-se, var(--_tst-dn-dt-se-ft-se));
279
+ font-weight: var(--_ctm-dn-ss-ft-wt, var(--_tst-dn-dt-se-ft-wt));
280
+ font-style: var(--_ctm-dn-ss-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
281
+ text-align: var(--_ctm-dn-ss-tt-an, var(--_tst-dn-dt-se-tt-an));
282
+ letter-spacing: var(--_ctm-dn-ss-lr-sg, var(--_tst-dn-dt-se-lr-sg));
283
+ line-height: var(--_ctm-dn-ss-le-ht, var(--_tst-dn-dt-se-le-ht));
284
+ text-decoration: var(--_ctm-dn-ss-tt-de, var(--_tst-dn-dt-se-tt-de));
285
+ border-color: var(--_show-border, var(--_ctm-dn-ss-br-cr, var(--_tst-dn-br-cr)));
286
+ border-style: var(--_show-border, var(--_ctm-dn-ss-br-se, var(--_tst-dn-br-se)));
287
+ border-width: var(--_show-border, var(--_ctm-dn-ss-br-wh, var(--_tst-dn-br-wh)));
288
+ border-radius: var(--_ctm-dn-ss-br-rs, var(--_tst-dn-br-rs));
289
+ box-shadow: var(
290
+ --_show-shadow,
291
+ var(--_ctm-dn-ss-sw-ae, var(--_tst-dn-sw-ae))
292
+ var(--_ctm-dn-ss-sw-br, var(--_tst-dn-sw-br))
293
+ var(--_ctm-dn-ss-sw-sd, var(--_tst-dn-sw-sd))
294
+ var(--_ctm-dn-ss-sw-cr, var(--_tst-dn-sw-cr))
295
+ );
296
+ }
297
+ .savings-value-span {
298
+ background-color: var(--_ctm-dn-ss-ve-bd-cr);
299
+ color: var(--_ctm-dn-ss-ve-cr, var(--_tst-dn-dt-se-cr));
300
+ font-family: var(--_ctm-dn-ss-ve-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
301
+ font-size: var(--_ctm-dn-ss-ve-ft-se, var(--_tst-dn-dt-se-ft-se));
302
+ font-weight: var(--_ctm-dn-ss-ve-ft-wt, var(--_tst-dn-dt-se-ft-wt));
303
+ font-style: var(--_ctm-dn-ss-ve-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
304
+ text-align: var(--_ctm-dn-ss-ve-tt-an, var(--_tst-dn-dt-se-tt-an));
305
+ letter-spacing: var(--_ctm-dn-ss-ve-lr-sg, var(--_tst-dn-dt-se-lr-sg));
306
+ line-height: var(--_ctm-dn-ss-ve-le-ht, var(--_tst-dn-dt-se-le-ht));
307
+ text-decoration: var(--_ctm-dn-ss-ve-tt-de, var(--_tst-dn-dt-se-tt-de));
308
+ border-color: var(--_show-border, var(--_ctm-dn-ss-ve-br-cr, var(--_tst-dn-br-cr)));
309
+ border-style: var(--_show-border, var(--_ctm-dn-ss-ve-br-se, var(--_tst-dn-br-se)));
310
+ border-width: var(--_show-border, var(--_ctm-dn-ss-ve-br-wh, var(--_tst-dn-br-wh)));
311
+ border-radius: var(--_ctm-dn-ss-ve-br-rs, var(--_tst-dn-br-rs));
312
+ box-shadow: var(
313
+ --_show-shadow,
314
+ var(--_ctm-dn-ss-ve-sw-ae, var(--_tst-dn-sw-ae))
315
+ var(--_ctm-dn-ss-ve-sw-br, var(--_tst-dn-sw-br))
316
+ var(--_ctm-dn-ss-ve-sw-sd, var(--_tst-dn-sw-sd))
317
+ var(--_ctm-dn-ss-ve-sw-cr, var(--_tst-dn-sw-cr))
318
+ );
319
+ }
320
+ .code-span {
321
+ background-color: var(--_ctm-dn-cy-ce-se-bd-cr);
322
+ color: var(--_ctm-dn-cy-ce-se-cr, var(--_tst-dn-dt-se-cr));
323
+ font-family: var(--_ctm-dn-cy-ce-se-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
324
+ font-size: var(--_ctm-dn-cy-ce-se-ft-se, var(--_tst-dn-dt-se-ft-se));
325
+ font-weight: var(--_ctm-dn-cy-ce-se-ft-wt, var(--_tst-dn-dt-se-ft-wt));
326
+ font-style: var(--_ctm-dn-cy-ce-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
327
+ text-align: var(--_ctm-dn-cy-ce-se-tt-an, var(--_tst-dn-dt-se-tt-an));
328
+ letter-spacing: var(--_ctm-dn-cy-ce-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
329
+ line-height: var(--_ctm-dn-cy-ce-se-le-ht, var(--_tst-dn-dt-se-le-ht));
330
+ text-decoration: var(--_ctm-dn-cy-ce-se-tt-de, var(--_tst-dn-dt-se-tt-de));
331
+ border-color: var(
332
+ --_show-border,
333
+ var(--_ctm-dn-cy-ce-se-br-cr, var(--_tst-dn-br-cr))
334
+ );
335
+ border-style: var(
336
+ --_show-border,
337
+ var(--_ctm-dn-cy-ce-se-br-se, var(--_tst-dn-br-se))
338
+ );
339
+ border-width: var(
340
+ --_show-border,
341
+ var(--_ctm-dn-cy-ce-se-br-wh, var(--_tst-dn-br-wh))
342
+ );
343
+ border-radius: var(--_ctm-dn-cy-ce-se-br-rs, var(--_tst-dn-br-rs));
344
+ box-shadow: var(
345
+ --_show-shadow,
346
+ var(--_ctm-dn-cy-ce-se-sw-ae, var(--_tst-dn-sw-ae))
347
+ var(--_ctm-dn-cy-ce-se-sw-br, var(--_tst-dn-sw-br))
348
+ var(--_ctm-dn-cy-ce-se-sw-sd, var(--_tst-dn-sw-sd))
349
+ var(--_ctm-dn-cy-ce-se-sw-cr, var(--_tst-dn-sw-cr))
350
+ );
351
+ }
352
+ }
353
+ }
354
+ .total-price-container {
355
+ .tax-box {
356
+ display: flex;
357
+ align-items: center;
358
+ gap: 5px;
359
+ background-color: var(--_ctm-dn-pt-tx-bd-cr);
360
+ color: var(--_ctm-dn-pt-tx-cr, var(--_tst-dn-dt-se-cr));
361
+ font-family: var(--_ctm-dn-pt-tx-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
362
+ font-size: var(--_ctm-dn-pt-tx-ft-se, var(--_tst-dn-dt-se-ft-se));
363
+ font-weight: var(--_ctm-dn-pt-tx-ft-wt, var(--_tst-dn-dt-se-ft-wt));
364
+ font-style: var(--_ctm-dn-pt-tx-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
365
+ text-align: var(--_ctm-dn-pt-tx-tt-an, var(--_tst-dn-dt-se-tt-an));
366
+ letter-spacing: var(--_ctm-dn-pt-tx-lr-sg, var(--_tst-dn-dt-se-lr-sg));
367
+ line-height: var(--_ctm-dn-pt-tx-le-ht, var(--_tst-dn-dt-se-le-ht));
368
+ text-decoration: var(--_ctm-dn-pt-tx-tt-de, var(--_tst-dn-dt-se-tt-de));
369
+ border-color: var(--_show-border, var(--_ctm-dn-pt-tx-br-cr, var(--_tst-dn-br-cr)));
370
+ border-style: var(--_show-border, var(--_ctm-dn-pt-tx-br-se, var(--_tst-dn-br-se)));
371
+ border-width: var(--_show-border, var(--_ctm-dn-pt-tx-br-wh, var(--_tst-dn-br-wh)));
372
+ border-radius: var(--_ctm-dn-pt-tx-br-rs, var(--_tst-dn-br-rs));
373
+ box-shadow: var(
374
+ --_show-shadow,
375
+ var(--_ctm-dn-pt-tx-sw-ae, var(--_tst-dn-sw-ae))
376
+ var(--_ctm-dn-pt-tx-sw-br, var(--_tst-dn-sw-br))
377
+ var(--_ctm-dn-pt-tx-sw-sd, var(--_tst-dn-sw-sd))
378
+ var(--_ctm-dn-pt-tx-sw-cr, var(--_tst-dn-sw-cr))
379
+ );
380
+ }
381
+ .shipping-box {
382
+ display: flex;
383
+ align-items: center;
384
+ gap: 5px;
385
+ background-color: var(--_ctm-dn-pt-sg-pe-bd-cr);
386
+ color: var(--_ctm-dn-pt-sg-pe-cr, var(--_tst-dn-dt-se-cr));
387
+ font-family: var(--_ctm-dn-pt-sg-pe-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
388
+ font-size: var(--_ctm-dn-pt-sg-pe-ft-se, var(--_tst-dn-dt-se-ft-se));
389
+ font-weight: var(--_ctm-dn-pt-sg-pe-ft-wt, var(--_tst-dn-dt-se-ft-wt));
390
+ font-style: var(--_ctm-dn-pt-sg-pe-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
391
+ text-align: var(--_ctm-dn-pt-sg-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
392
+ letter-spacing: var(--_ctm-dn-pt-sg-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
393
+ line-height: var(--_ctm-dn-pt-sg-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
394
+ text-decoration: var(--_ctm-dn-pt-sg-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
395
+ border-color: var(--_show-border, var(--_ctm-dn-pt-sg-pe-br-cr, var(--_tst-dn-br-cr)));
396
+ border-style: var(--_show-border, var(--_ctm-dn-pt-sg-pe-br-se, var(--_tst-dn-br-se)));
397
+ border-width: var(--_show-border, var(--_ctm-dn-pt-sg-pe-br-wh, var(--_tst-dn-br-wh)));
398
+ border-radius: var(--_ctm-dn-pt-sg-pe-br-rs, var(--_tst-dn-br-rs));
399
+ box-shadow: var(
400
+ --_show-shadow,
401
+ var(--_ctm-dn-pt-sg-pe-sw-ae, var(--_tst-dn-sw-ae))
402
+ var(--_ctm-dn-pt-sg-pe-sw-br, var(--_tst-dn-sw-br))
403
+ var(--_ctm-dn-pt-sg-pe-sw-sd, var(--_tst-dn-sw-sd))
404
+ var(--_ctm-dn-pt-sg-pe-sw-cr, var(--_tst-dn-sw-cr))
405
+ );
406
+ }
407
+ .embellishment-box {
408
+ display: flex;
409
+ align-items: center;
410
+ gap: 5px;
411
+ background-color: var(--_ctm-dn-et-pe-bd-cr);
412
+ color: var(--_ctm-dn-et-pe-cr, var(--_tst-dn-dt-se-cr));
413
+ font-family: var(--_ctm-dn-et-pe-ft-fy, var(--_tst-dn-dt-se-ft-fy)), sans-serif;
414
+ font-size: var(--_ctm-dn-et-pe-ft-se, var(--_tst-dn-dt-se-ft-se));
415
+ font-weight: var(--_ctm-dn-et-pe-ft-wt, var(--_tst-dn-dt-se-ft-wt));
416
+ font-style: var(--_ctm-dn-et-pe-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic));
417
+ text-align: var(--_ctm-dn-et-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
418
+ letter-spacing: var(--_ctm-dn-et-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
419
+ line-height: var(--_ctm-dn-et-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
420
+ text-decoration: var(--_ctm-dn-et-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
421
+ border-color: var(--_show-border, var(--_ctm-dn-et-pe-br-cr, var(--_tst-dn-br-cr)));
422
+ border-style: var(--_show-border, var(--_ctm-dn-et-pe-br-se, var(--_tst-dn-br-se)));
423
+ border-width: var(--_show-border, var(--_ctm-dn-et-pe-br-wh, var(--_tst-dn-br-wh)));
424
+ border-radius: var(--_ctm-dn-et-pe-br-rs, var(--_tst-dn-br-rs));
425
+ box-shadow: var(
426
+ --_show-shadow,
427
+ var(--_ctm-dn-et-pe-sw-ae, var(--_tst-dn-sw-ae))
428
+ var(--_ctm-dn-et-pe-sw-br, var(--_tst-dn-sw-br))
429
+ var(--_ctm-dn-et-pe-sw-sd, var(--_tst-dn-sw-sd))
430
+ var(--_ctm-dn-et-pe-sw-cr, var(--_tst-dn-sw-cr))
431
+ );
432
+ }
433
+ }
434
+ }
67
435
  }
68
436
  }
69
437
  }