@sc-360-v2/storefront-cms-library 0.5.52 → 0.5.53

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 (21) hide show
  1. package/dist/allocationDetails.scss +438 -224
  2. package/dist/allocations.scss +172 -13
  3. package/dist/builder.js +1 -1
  4. package/dist/cart-summary.scss +237 -854
  5. package/dist/faq.scss +48 -5
  6. package/dist/icon-list.scss +19 -1
  7. package/dist/image-temp.scss +15 -2
  8. package/dist/language-selector.scss +99 -33
  9. package/dist/my-templates.scss +11 -2
  10. package/dist/my-wishlist.scss +27 -17
  11. package/dist/profile.scss +44 -19
  12. package/dist/quota-details.scss +111 -11
  13. package/dist/repeater-item.scss +34 -22
  14. package/dist/request-for-quotes.scss +15 -1
  15. package/dist/types/builder/tools/element-edit/allocationDetails.d.ts +17 -1
  16. package/dist/types/builder/tools/element-edit/iconLibrary.d.ts +7 -1
  17. package/dist/types/builder/tools/element-edit/imageHotspot.d.ts +0 -1
  18. package/dist/types/builder/tools/element-edit/language-menu.d.ts +0 -14
  19. package/dist/types/builder/tools/element-edit/userElements.d.ts +5 -0
  20. package/dist/user-elements.scss +6 -0
  21. package/package.json +1 -1
package/dist/cart-summary.scss CHANGED
@@ -6,6 +6,51 @@ $resizerId: "[data-cms-tool='cms-element-resizer']";
6
6
  $resizeActive: '[data-cms-element-resizer="true"]';
7
7
  $overflowSelector: ".flex__overflow";
8
8
 
9
+ // A summary row is a label plus a value, and the builder emits one design scope per
10
+ // row: the label typography under the bare keys, the value typography under the `-dc`
11
+ // twins. `$scope` is the row's variable prefix, e.g. `--_ctm-dn-nr-of-is`.
12
+ @mixin cartSummaryLabel($scope) {
13
+ font-family: prepareMediaVariable(#{$scope}-ft-fy);
14
+ color: prepareMediaVariable(#{$scope}-cr);
15
+ font-weight: prepareMediaVariable(#{$scope}-ft-wt);
16
+ font-size: prepareMediaVariable(#{$scope}-ft-se);
17
+ text-decoration: prepareMediaVariable(#{$scope}-ue);
18
+ letter-spacing: prepareMediaVariable(#{$scope}-lr-sg);
19
+ line-height: prepareMediaVariable(#{$scope}-le-ht);
20
+ font-style: prepareMediaVariable(#{$scope}-ft-se-ic);
21
+ text-align: prepareMediaVariable(#{$scope}-tt-an);
22
+ text-transform: prepareMediaVariable(#{$scope}-tt-tm);
23
+ }
24
+
25
+ @mixin cartSummaryValue($scope) {
26
+ font-family: prepareMediaVariable(#{$scope}-ft-fy-dc);
27
+ color: prepareMediaVariable(#{$scope}-cr-dc);
28
+ font-weight: prepareMediaVariable(#{$scope}-ft-wt-dc);
29
+ font-size: prepareMediaVariable(#{$scope}-ft-se-dc);
30
+ text-decoration: prepareMediaVariable(#{$scope}-ue-dc);
31
+ letter-spacing: prepareMediaVariable(#{$scope}-lr-sg-dc);
32
+ line-height: prepareMediaVariable(#{$scope}-le-ht-dc);
33
+ font-style: prepareMediaVariable(#{$scope}-ft-se-ic-dc);
34
+ text-align: prepareMediaVariable(#{$scope}-tt-an-dc);
35
+ text-transform: prepareMediaVariable(#{$scope}-tt-tm-dc);
36
+ }
37
+
38
+ // A design scope that only paints a box: background, padding, border and shadow.
39
+ @mixin cartSummaryBox($scope) {
40
+ background-color: prepareMediaVariable(#{$scope}-bd-cr);
41
+ padding: prepareMediaVariable(#{$scope}-pg);
42
+ border-color: prepareMediaVariable(#{$scope}-br-cr);
43
+ border-style: prepareMediaVariable(#{$scope}-br-se);
44
+ border-width: prepareMediaVariable(#{$scope}-br-wh);
45
+ border-radius: prepareMediaVariable(#{$scope}-br-rs);
46
+ }
47
+
48
+ // The four shadow parts are separate custom properties, so each needs its own var().
49
+ @mixin cartSummaryShadow($scope) {
50
+ box-shadow: prepareMediaVariable(#{$scope}-sw-ae) prepareMediaVariable(#{$scope}-sw-br)
51
+ prepareMediaVariable(#{$scope}-sw-sd) prepareMediaVariable(#{$scope}-sw-cr);
52
+ }
53
+
9
54
  [data-div-type="element"] {
10
55
  &[data-element-type="cartSummary"] {
11
56
  // width: var(
@@ -46,47 +91,11 @@ $overflowSelector: ".flex__overflow";
46
91
  align-items: center;
47
92
  gap: 12px;
48
93
  align-self: stretch;
49
- background-color: var(
50
- --_ctm-mob-dn-hr-cr-bd-cr,
51
- var(--_ctm-tab-dn-hr-cr-bd-cr, var(--_ctm-dn-hr-cr-bd-cr))
52
- );
53
94
  // border-bottom: 0.5px solid var(--_thm-cs-be-se-3);
54
- border-color: prepareMediaVariable(--_ctm-dn-hr-cr-br-cr);
55
- // var(
56
- // --_ctm-mob-dn-hr-cr-br-cr,
57
- // var(--_ctm-tab-dn-hr-cr-br-cr, var(--_ctm-dn-hr-cr-br-cr))
58
- // );
59
- border-style: prepareMediaVariable(--_ctm-dn-hr-cr-br-se);
60
- // var(
61
- // --_ctm-mob-dn-hr-cr-br-se,
62
- // var(--_ctm-tab-dn-hr-cr-br-se, var(--_ctm-dn-hr-cr-br-se))
63
- // );
64
- border-width: prepareMediaVariable(--_ctm-dn-hr-cr-br-wh);
65
- // var(
66
- // --_ctm-mob-dn-hr-cr-br-wh,
67
- // var(--_ctm-tab-dn-hr-cr-br-wh, var(--_ctm-dn-hr-cr-br-wh))
68
- // );
69
- padding: prepareMediaVariable(
70
- --_ctm-dn-hr-cr-pg
71
- ); // var(--_ctm-mob-dn-hr-cr-pg, var(--_ctm-tab-dn-hr-cr-pg, var(--_ctm-dn-hr-cr-pg)))
72
- box-shadow: var(
73
- var(
74
- --_ctm-mob-dn-hr-cr-sw-ae,
75
- var(--_ctm-tab-dn-hr-cr-sw-ae, var(--_ctm-dn-hr-cr-sw-ae, none))
76
- )
77
- var(
78
- --_ctm-mob-dn-hr-cr-sw-br,
79
- var(--_ctm-tab-dn-hr-cr-sw-br, var(--_ctm-dn-hr-cr-sw-br, none))
80
- )
81
- var(
82
- --_ctm-mob-dn-hr-cr-sw-sd,
83
- var(--_ctm-tab-dn-hr-cr-sw-sd, var(--_ctm-dn-hr-cr-sw-sd, none))
84
- )
85
- var(
86
- --_ctm-mob-dn-hr-cr-sw-cr,
87
- var(--_ctm-tab-dn-hr-cr-sw-cr, var(--_ctm-dn-hr-cr-sw-cr, none))
88
- )
89
- );
95
+ // Border Radius was never read here, and Box Shadow wrapped all four parts in
96
+ // a single var(), which made the declaration invalid.
97
+ @include cartSummaryBox(--_ctm-dn-hr-cr);
98
+ @include cartSummaryShadow(--_ctm-dn-hr-cr);
90
99
 
91
100
  .icon svg {
92
101
  path {
@@ -200,6 +209,10 @@ $overflowSelector: ".flex__overflow";
200
209
  --_ctm-mob-dn-ct-by-wt-br-rs,
201
210
  var(--_ctm-tab-dn-ct-by-wt-br-rs, var(--_ctm-dn-ct-by-wt-br-rs))
202
211
  );
212
+ // The body widget already carried typography in the schema but nothing read
213
+ // it. It is the body's text default now, which every row with its own design
214
+ // section overrides.
215
+ @include cartSummaryLabel(--_ctm-dn-ct-by-wt);
203
216
  display: flex;
204
217
  flex-direction: column;
205
218
  width: 100%;
@@ -239,15 +252,14 @@ $overflowSelector: ".flex__overflow";
239
252
  var(--_ctm-tab-dn-pt-wt-pt-wt-wr-br-rs, var(--_ctm-dn-pt-wt-pt-wt-wr-br-rs))
240
253
  );
241
254
 
242
- .cart_summary_product_info_wrapper {
255
+ // Product Widget Item — one product card. Nothing but the item gap used to
256
+ // be read here, so Background Color, Border, Border Radius and Padding had
257
+ // no effect.
258
+ .cart_summary_product_item {
243
259
  display: flex;
244
260
  align-items: flex-start;
245
261
  justify-content: space-between;
246
- // gap: calc(var(--_ctm-lt-im-gp) * 2);
247
- // gap: var(
248
- // --_ctm-mob-dn-pt-wt-pt-wt-wr-im-gp,
249
- // var(--_ctm-tab-dn-pt-wt-pt-wt-wr-im-gp, var(--_ctm-dn-pt-wt-pt-wt-wr-im-gp))
250
- // );
262
+ @include cartSummaryBox(--_ctm-dn-pt-wt-pt-wt-im);
251
263
 
252
264
  .cart_summary_product_info_wrapper {
253
265
  display: flex;
@@ -258,14 +270,17 @@ $overflowSelector: ".flex__overflow";
258
270
  width: 80%;
259
271
  align-items: flex-start;
260
272
 
273
+ // Product Image. The outline used to be a hard-coded
274
+ // `1px solid var(--_gray-200)` with a 4px radius, so none of the Border,
275
+ // Border Style, Border Radius or Box Shadow settings could reach it.
261
276
  .cart_summary_pro_container {
262
277
  width: 80px;
263
278
  // height: 80px;
264
279
  display: flex;
265
280
  justify-content: center;
266
281
  align-items: center;
267
- border: 1px solid var(--_gray-200);
268
- border-radius: 4px;
282
+ @include cartSummaryBox(--_ctm-dn-pt-wt-pt-ie);
283
+ @include cartSummaryShadow(--_ctm-dn-pt-wt-pt-ie);
269
284
 
270
285
  .cart_summary_product_img {
271
286
  max-width: 100%;
@@ -285,6 +300,22 @@ $overflowSelector: ".flex__overflow";
285
300
  flex-direction: column;
286
301
  // pt-wt-pt-qy-ft-fy
287
302
 
303
+ // Padding belongs to the row: applying it to the label and the value
304
+ // separately would apply the section's padding twice.
305
+ .cart_summary_qty_wrapper {
306
+ display: flex;
307
+ flex-wrap: wrap;
308
+ align-items: center;
309
+ padding: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-pg);
310
+ }
311
+
312
+ .cart_summary_estimatedDate_wrapper {
313
+ display: flex;
314
+ flex-wrap: wrap;
315
+ align-items: center;
316
+ padding: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-pg);
317
+ }
318
+
288
319
  .cart_summary_qty_text {
289
320
  font-family: var(
290
321
  --_ctm-mob-dn-pt-wt-pt-qy-ft-fy,
@@ -323,6 +354,7 @@ $overflowSelector: ".flex__overflow";
323
354
  --_ctm-mob-dn-pt-wt-pt-qy-tt-an,
324
355
  var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an, var(--_ctm-dn-pt-wt-pt-qy-tt-an))
325
356
  );
357
+ text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-tt-tm);
326
358
  }
327
359
 
328
360
  .cart_summary_qty_value {
@@ -366,6 +398,7 @@ $overflowSelector: ".flex__overflow";
366
398
  --_ctm-mob-dn-pt-wt-pt-qy-tt-an-dc,
367
399
  var(--_ctm-tab-dn-pt-wt-pt-qy-tt-an-dc, var(--_ctm-dn-pt-wt-pt-qy-tt-an-dc))
368
400
  );
401
+ text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-qy-tt-tm-dc);
369
402
  }
370
403
 
371
404
  .cart_summary_estimatedDate_text {
@@ -408,6 +441,7 @@ $overflowSelector: ".flex__overflow";
408
441
  --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an,
409
442
  var(--_ctm-tab-dn-pt-wt-pt-ed-de-tt-an, var(--_ctm-dn-pt-wt-pt-ed-de-tt-an))
410
443
  );
444
+ text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-tt-tm);
411
445
  }
412
446
 
413
447
  .cart_summary_estimatedDate_value {
@@ -468,6 +502,7 @@ $overflowSelector: ".flex__overflow";
468
502
  var(--_ctm-dn-pt-wt-pt-ed-de-tt-an-dc)
469
503
  )
470
504
  );
505
+ text-transform: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ed-de-tt-tm-dc);
471
506
  }
472
507
  }
473
508
  }
@@ -518,6 +553,10 @@ $overflowSelector: ".flex__overflow";
518
553
  }
519
554
  }
520
555
 
556
+ // Every summary row gets its own label/value classes so a design section only
557
+ // reaches the field it belongs to. Rows the Design tab has no section for
558
+ // (Embellishment Price, Attributes / Gift Card / Deal Amount) keep the widget's
559
+ // static defaults instead of borrowing another section's scope.
521
560
  .subtotal_wrapper {
522
561
  display: flex;
523
562
  align-items: center;
@@ -525,333 +564,54 @@ $overflowSelector: ".flex__overflow";
525
564
  align-self: stretch;
526
565
  justify-content: space-between;
527
566
 
567
+ // Number of Items
528
568
  .cart_summary_number_text {
529
- // color: var(--_gray-500);
530
- // font-size: 14px;
531
- // font-weight: 400;
532
- font-family: var(
533
- --_ctm-mob-dn-nr-of-is-ft-fy,
534
- var(--_ctm-tab-dn-nr-of-is-ft-fy, var(--_ctm-dn-nr-of-is-ft-fy))
535
- );
536
- color: var(
537
- --_ctm-mob-dn-nr-of-is-cr,
538
- var(--_ctm-tab-dn-nr-of-is-cr, var(--_ctm-dn-nr-of-is-cr))
539
- );
540
- font-weight: var(
541
- --_ctm-mob-dn-nr-of-is-ft-wt,
542
- var(--_ctm-tab-dn-nr-of-is-ft-wt, var(--_ctm-dn-nr-of-is-ft-wt))
543
- );
544
- font-size: var(
545
- --_ctm-mob-dn-nr-of-is-ft-se,
546
- var(--_ctm-tab-dn-nr-of-is-ft-se, var(--_ctm-dn-nr-of-is-ft-se))
547
- );
548
- // font-size: 14px;
549
- text-decoration: var(
550
- --_ctm-mob-dn-nr-of-is-ue,
551
- var(--_ctm-tab-dn-nr-of-is-ue, var(--_ctm-dn-nr-of-is-ue))
552
- );
553
- letter-spacing: var(
554
- --_ctm-mob-dn-nr-of-is-lr-sg,
555
- var(--_ctm-tab-dn-nr-of-is-lr-sg, var(--_ctm-dn-nr-of-is-lr-sg))
556
- );
557
- line-height: var(
558
- --_ctm-mob-dn-nr-of-is-le-ht,
559
- var(--_ctm-tab-dn-nr-of-is-le-ht, var(--_ctm-dn-nr-of-is-le-ht))
560
- );
561
- font-style: var(
562
- --_ctm-mob-dn-nr-of-is-ft-se-ic,
563
- var(--_ctm-tab-dn-nr-of-is-ft-se-ic, var(--_ctm-dn-nr-of-is-ft-se-ic))
564
- );
565
- text-align: var(
566
- --_ctm-mob-dn-nr-of-is-tt-an,
567
- var(--_ctm-tab-dn-nr-of-is-tt-an, var(--_ctm-dn-nr-of-is-tt-an))
568
- );
569
+ @include cartSummaryLabel(--_ctm-dn-nr-of-is);
569
570
  }
570
571
 
571
572
  .cart_summary_number_value {
572
- font-family: var(
573
- --_ctm-mob-dn-nr-of-is-ft-fy-dc,
574
- var(--_ctm-tab-dn-nr-of-is-ft-fy-dc, var(--_ctm-dn-nr-of-is-ft-fy-dc))
575
- );
576
- color: var(
577
- --_ctm-mob-dn-nr-of-is-cr-dc,
578
- var(--_ctm-tab-dn-nr-of-is-cr-dc, var(--_ctm-dn-nr-of-is-cr-dc))
579
- );
580
- font-weight: var(
581
- --_ctm-mob-dn-nr-of-is-ft-wt-dc,
582
- var(--_ctm-tab-dn-nr-of-is-ft-wt-dc, var(--_ctm-dn-nr-of-is-ft-wt-dc))
583
- );
584
- font-size: var(
585
- --_ctm-mob-dn-nr-of-is-ft-se-dc,
586
- var(--_ctm-tab-dn-nr-of-is-ft-se-dc, var(--_ctm-dn-nr-of-is-ft-se-dc))
587
- );
588
- text-decoration: var(
589
- --_ctm-mob-dn-nr-of-is-ue-dc,
590
- var(--_ctm-tab-dn-nr-of-is-ue-dc, var(--_ctm-dn-nr-of-is-ue-dc))
591
- );
592
- letter-spacing: var(
593
- --_ctm-mob-dn-nr-of-is-lr-sg-dc,
594
- var(--_ctm-tab-dn-nr-of-is-lr-sg-dc, var(--_ctm-dn-nr-of-is-lr-sg-dc))
595
- );
596
- line-height: var(
597
- --_ctm-mob-dn-nr-of-is-le-ht-dc,
598
- var(--_ctm-tab-dn-nr-of-is-le-ht-dc, var(--_ctm-dn-nr-of-is-le-ht-dc))
599
- );
600
- font-style: var(
601
- --_ctm-mob-dn-nr-of-is-ft-se-ic-dc,
602
- var(--_ctm-tab-dn-nr-of-is-ft-se-ic-dc, var(--_ctm-dn-nr-of-is-ft-se-ic-dc))
603
- );
604
- text-align: var(
605
- --_ctm-mob-dn-nr-of-is-tt-an-dc,
606
- var(--_ctm-tab-dn-nr-of-is-tt-an-dc, var(--_ctm-dn-nr-of-is-tt-an-dc))
607
- );
573
+ @include cartSummaryValue(--_ctm-dn-nr-of-is);
608
574
  }
609
575
 
610
- .cart_summary_show_coupon_text {
611
- // color: var(--_gray-500);
612
- // font-size: 14px;
613
- // font-weight: 400;
614
- font-family: var(
615
- --_ctm-mob-dn-sw-cn-ce-ll-ft-fy,
616
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-fy, var(--_ctm-dn-sw-cn-ce-ll-ft-fy))
617
- );
618
- color: var(
619
- --_ctm-mob-dn-sw-cn-ce-ll-cr,
620
- var(--_ctm-tab-dn-sw-cn-ce-ll-cr, var(--_ctm-dn-sw-cn-ce-ll-cr))
621
- );
622
- font-weight: var(
623
- --_ctm-mob-dn-sw-cn-ce-ll-ft-wt,
624
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-wt, var(--_ctm-dn-sw-cn-ce-ll-ft-wt))
625
- );
626
- font-size: var(
627
- --_ctm-mob-dn-sw-cn-ce-ll-ft-se,
628
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-se, var(--_ctm-dn-sw-cn-ce-ll-ft-se))
629
- );
630
- // font-size: 14px;
631
- text-decoration: var(
632
- --_ctm-mob-dn-sw-cn-ce-ll-ue,
633
- var(--_ctm-tab-dn-sw-cn-ce-ll-ue, var(--_ctm-dn-sw-cn-ce-ll-ue))
634
- );
635
- letter-spacing: var(
636
- --_ctm-mob-dn-sw-cn-ce-ll-lr-sg,
637
- var(--_ctm-tab-dn-sw-cn-ce-ll-lr-sg, var(--_ctm-dn-sw-cn-ce-ll-lr-sg))
638
- );
639
- line-height: var(
640
- --_ctm-mob-dn-sw-cn-ce-ll-le-ht,
641
- var(--_ctm-tab-dn-sw-cn-ce-ll-le-ht, var(--_ctm-dn-sw-cn-ce-ll-le-ht))
642
- );
643
- font-style: var(
644
- --_ctm-mob-dn-sw-cn-ce-ll-ft-se-ic,
645
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-se-ic, var(--_ctm-dn-sw-cn-ce-ll-ft-se-ic))
646
- );
647
- text-align: var(
648
- --_ctm-mob-dn-sw-cn-ce-ll-tt-an,
649
- var(--_ctm-tab-dn-sw-cn-ce-ll-tt-an, var(--_ctm-dn-sw-cn-ce-ll-tt-an))
650
- );
576
+ // Sub Total
577
+ .cart_summary_subTotal_text {
578
+ @include cartSummaryLabel(--_ctm-dn-sb-tl);
651
579
  }
652
580
 
653
- .cart_summary_show_coupon_value {
654
- font-family: var(
655
- --_ctm-mob-dn-sw-cn-ce-ll-ft-fy-dc,
656
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-fy-dc, var(--_ctm-dn-sw-cn-ce-ll-ft-fy-dc))
657
- );
658
- color: var(
659
- --_ctm-mob-dn-sw-cn-ce-ll-cr-dc,
660
- var(--_ctm-tab-dn-sw-cn-ce-ll-cr-dc, var(--_ctm-dn-sw-cn-ce-ll-cr-dc))
661
- );
662
- font-weight: var(
663
- --_ctm-mob-dn-sw-cn-ce-ll-ft-wt-dc,
664
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-wt-dc, var(--_ctm-dn-sw-cn-ce-ll-ft-wt-dc))
665
- );
666
- font-size: var(
667
- --_ctm-mob-dn-sw-cn-ce-ll-ft-se-dc,
668
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-se-dc, var(--_ctm-dn-sw-cn-ce-ll-ft-se-dc))
669
- );
670
- text-decoration: var(
671
- --_ctm-mob-dn-sw-cn-ce-ll-ue-dc,
672
- var(--_ctm-tab-dn-sw-cn-ce-ll-ue-dc, var(--_ctm-dn-sw-cn-ce-ll-ue-dc))
673
- );
674
- letter-spacing: var(
675
- --_ctm-mob-dn-sw-cn-ce-ll-lr-sg-dc,
676
- var(--_ctm-tab-dn-sw-cn-ce-ll-lr-sg-dc, var(--_ctm-dn-sw-cn-ce-ll-lr-sg-dc))
677
- );
678
- line-height: var(
679
- --_ctm-mob-dn-sw-cn-ce-ll-le-ht-dc,
680
- var(--_ctm-tab-dn-sw-cn-ce-ll-le-ht-dc, var(--_ctm-dn-sw-cn-ce-ll-le-ht-dc))
681
- );
682
- font-style: var(
683
- --_ctm-mob-dn-sw-cn-ce-ll-ft-se-ic-dc,
684
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-se-ic-dc, var(--_ctm-dn-sw-cn-ce-ll-ft-se-ic-dc))
685
- );
686
- text-align: var(
687
- --_ctm-mob-dn-sw-cn-ce-ll-tt-an-dc,
688
- var(--_ctm-tab-dn-sw-cn-ce-ll-tt-an-dc, var(--_ctm-dn-sw-cn-ce-ll-tt-an-dc))
689
- );
581
+ .cart_summary_subTotal_value {
582
+ @include cartSummaryValue(--_ctm-dn-sb-tl);
690
583
  }
691
584
 
692
- .cart_summary_show_gift_card_text {
693
- // color: var(--_gray-500);
694
- // font-size: 14px;
695
- // font-weight: 400;
696
- font-family: var(
697
- --_ctm-mob-dn-sw-cn-ce-ll-ft-fy,
698
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-fy, var(--_ctm-dn-sw-cn-ce-ll-ft-fy))
699
- );
700
- color: var(
701
- --_ctm-mob-dn-sw-cn-ce-ll-cr,
702
- var(--_ctm-tab-dn-sw-cn-ce-ll-cr, var(--_ctm-dn-sw-cn-ce-ll-cr))
703
- );
704
- font-weight: var(
705
- --_ctm-mob-dn-sw-cn-ce-ll-ft-wt,
706
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-wt, var(--_ctm-dn-sw-cn-ce-ll-ft-wt))
707
- );
708
- font-size: var(
709
- --_ctm-mob-dn-sw-cn-ce-ll-ft-se,
710
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-se, var(--_ctm-dn-sw-cn-ce-ll-ft-se))
711
- );
712
- // font-size: 14px;
713
- text-decoration: var(
714
- --_ctm-mob-dn-sw-cn-ce-ll-ue,
715
- var(--_ctm-tab-dn-sw-cn-ce-ll-ue, var(--_ctm-dn-sw-cn-ce-ll-ue))
716
- );
717
- letter-spacing: var(
718
- --_ctm-mob-dn-sw-cn-ce-ll-lr-sg,
719
- var(--_ctm-tab-dn-sw-cn-ce-ll-lr-sg, var(--_ctm-dn-sw-cn-ce-ll-lr-sg))
720
- );
721
- line-height: var(
722
- --_ctm-mob-dn-sw-cn-ce-ll-le-ht,
723
- var(--_ctm-tab-dn-sw-cn-ce-ll-le-ht, var(--_ctm-dn-sw-cn-ce-ll-le-ht))
724
- );
725
- font-style: var(
726
- --_ctm-mob-dn-sw-cn-ce-ll-ft-se-ic,
727
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-se-ic, var(--_ctm-dn-sw-cn-ce-ll-ft-se-ic))
728
- );
729
- text-align: var(
730
- --_ctm-mob-dn-sw-cn-ce-ll-tt-an,
731
- var(--_ctm-tab-dn-sw-cn-ce-ll-tt-an, var(--_ctm-dn-sw-cn-ce-ll-tt-an))
732
- );
585
+ // Shipping Charges
586
+ .cart_summary_shippingLabel_text {
587
+ @include cartSummaryLabel(--_ctm-dn-sg-cs);
733
588
  }
734
589
 
735
- .cart_summary_show_gift_card_value {
736
- font-family: var(
737
- --_ctm-mob-dn-sw-cn-ce-ll-ft-fy-dc,
738
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-fy-dc, var(--_ctm-dn-sw-cn-ce-ll-ft-fy-dc))
739
- );
740
- color: var(
741
- --_ctm-mob-dn-sw-cn-ce-ll-cr-dc,
742
- var(--_ctm-tab-dn-sw-cn-ce-ll-cr-dc, var(--_ctm-dn-sw-cn-ce-ll-cr-dc))
743
- );
744
- font-weight: var(
745
- --_ctm-mob-dn-sw-cn-ce-ll-ft-wt-dc,
746
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-wt-dc, var(--_ctm-dn-sw-cn-ce-ll-ft-wt-dc))
747
- );
748
- font-size: var(
749
- --_ctm-mob-dn-sw-cn-ce-ll-ft-se-dc,
750
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-se-dc, var(--_ctm-dn-sw-cn-ce-ll-ft-se-dc))
751
- );
752
- text-decoration: var(
753
- --_ctm-mob-dn-sw-cn-ce-ll-ue-dc,
754
- var(--_ctm-tab-dn-sw-cn-ce-ll-ue-dc, var(--_ctm-dn-sw-cn-ce-ll-ue-dc))
755
- );
756
- letter-spacing: var(
757
- --_ctm-mob-dn-sw-cn-ce-ll-lr-sg-dc,
758
- var(--_ctm-tab-dn-sw-cn-ce-ll-lr-sg-dc, var(--_ctm-dn-sw-cn-ce-ll-lr-sg-dc))
759
- );
760
- line-height: var(
761
- --_ctm-mob-dn-sw-cn-ce-ll-le-ht-dc,
762
- var(--_ctm-tab-dn-sw-cn-ce-ll-le-ht-dc, var(--_ctm-dn-sw-cn-ce-ll-le-ht-dc))
763
- );
764
- font-style: var(
765
- --_ctm-mob-dn-sw-cn-ce-ll-ft-se-ic-dc,
766
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-se-ic-dc, var(--_ctm-dn-sw-cn-ce-ll-ft-se-ic-dc))
767
- );
768
- text-align: var(
769
- --_ctm-mob-dn-sw-cn-ce-ll-tt-an-dc,
770
- var(--_ctm-tab-dn-sw-cn-ce-ll-tt-an-dc, var(--_ctm-dn-sw-cn-ce-ll-tt-an-dc))
771
- );
590
+ .cart_summary_shippingLabel_value {
591
+ @include cartSummaryValue(--_ctm-dn-sg-cs);
772
592
  }
773
593
 
774
- .cart_summary_show_deal_text {
775
- // color: var(--_gray-500);
776
- // font-size: 14px;
777
- // font-weight: 400;
778
- font-family: var(
779
- --_ctm-mob-dn-sw-cn-ce-ll-ft-fy,
780
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-fy, var(--_ctm-dn-sw-cn-ce-ll-ft-fy))
781
- );
782
- color: var(
783
- --_ctm-mob-dn-sw-cn-ce-ll-cr,
784
- var(--_ctm-tab-dn-sw-cn-ce-ll-cr, var(--_ctm-dn-sw-cn-ce-ll-cr))
785
- );
786
- font-weight: var(
787
- --_ctm-mob-dn-sw-cn-ce-ll-ft-wt,
788
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-wt, var(--_ctm-dn-sw-cn-ce-ll-ft-wt))
789
- );
790
- font-size: var(
791
- --_ctm-mob-dn-sw-cn-ce-ll-ft-se,
792
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-se, var(--_ctm-dn-sw-cn-ce-ll-ft-se))
793
- );
794
- // font-size: 14px;
795
- text-decoration: var(
796
- --_ctm-mob-dn-sw-cn-ce-ll-ue,
797
- var(--_ctm-tab-dn-sw-cn-ce-ll-ue, var(--_ctm-dn-sw-cn-ce-ll-ue))
798
- );
799
- letter-spacing: var(
800
- --_ctm-mob-dn-sw-cn-ce-ll-lr-sg,
801
- var(--_ctm-tab-dn-sw-cn-ce-ll-lr-sg, var(--_ctm-dn-sw-cn-ce-ll-lr-sg))
802
- );
803
- line-height: var(
804
- --_ctm-mob-dn-sw-cn-ce-ll-le-ht,
805
- var(--_ctm-tab-dn-sw-cn-ce-ll-le-ht, var(--_ctm-dn-sw-cn-ce-ll-le-ht))
806
- );
807
- font-style: var(
808
- --_ctm-mob-dn-sw-cn-ce-ll-ft-se-ic,
809
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-se-ic, var(--_ctm-dn-sw-cn-ce-ll-ft-se-ic))
810
- );
811
- text-align: var(
812
- --_ctm-mob-dn-sw-cn-ce-ll-tt-an,
813
- var(--_ctm-tab-dn-sw-cn-ce-ll-tt-an, var(--_ctm-dn-sw-cn-ce-ll-tt-an))
814
- );
594
+ // Tax
595
+ .cart_summary_tax_text {
596
+ @include cartSummaryLabel(--_ctm-dn-tx);
815
597
  }
816
598
 
817
- .cart_summary_show_deal_value {
818
- font-family: var(
819
- --_ctm-mob-dn-sw-cn-ce-ll-ft-fy-dc,
820
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-fy-dc, var(--_ctm-dn-sw-cn-ce-ll-ft-fy-dc))
821
- );
822
- color: var(
823
- --_ctm-mob-dn-sw-cn-ce-ll-cr-dc,
824
- var(--_ctm-tab-dn-sw-cn-ce-ll-cr-dc, var(--_ctm-dn-sw-cn-ce-ll-cr-dc))
825
- );
826
- font-weight: var(
827
- --_ctm-mob-dn-sw-cn-ce-ll-ft-wt-dc,
828
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-wt-dc, var(--_ctm-dn-sw-cn-ce-ll-ft-wt-dc))
829
- );
830
- font-size: var(
831
- --_ctm-mob-dn-sw-cn-ce-ll-ft-se-dc,
832
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-se-dc, var(--_ctm-dn-sw-cn-ce-ll-ft-se-dc))
833
- );
834
- text-decoration: var(
835
- --_ctm-mob-dn-sw-cn-ce-ll-ue-dc,
836
- var(--_ctm-tab-dn-sw-cn-ce-ll-ue-dc, var(--_ctm-dn-sw-cn-ce-ll-ue-dc))
837
- );
838
- letter-spacing: var(
839
- --_ctm-mob-dn-sw-cn-ce-ll-lr-sg-dc,
840
- var(--_ctm-tab-dn-sw-cn-ce-ll-lr-sg-dc, var(--_ctm-dn-sw-cn-ce-ll-lr-sg-dc))
841
- );
842
- line-height: var(
843
- --_ctm-mob-dn-sw-cn-ce-ll-le-ht-dc,
844
- var(--_ctm-tab-dn-sw-cn-ce-ll-le-ht-dc, var(--_ctm-dn-sw-cn-ce-ll-le-ht-dc))
845
- );
846
- font-style: var(
847
- --_ctm-mob-dn-sw-cn-ce-ll-ft-se-ic-dc,
848
- var(--_ctm-tab-dn-sw-cn-ce-ll-ft-se-ic-dc, var(--_ctm-dn-sw-cn-ce-ll-ft-se-ic-dc))
849
- );
850
- text-align: var(
851
- --_ctm-mob-dn-sw-cn-ce-ll-tt-an-dc,
852
- var(--_ctm-tab-dn-sw-cn-ce-ll-tt-an-dc, var(--_ctm-dn-sw-cn-ce-ll-tt-an-dc))
853
- );
599
+ .cart_summary_tax_value {
600
+ @include cartSummaryValue(--_ctm-dn-tx);
854
601
  }
602
+
603
+ // Show Coupon Amount
604
+ .cart_summary_show_coupon_text {
605
+ @include cartSummaryLabel(--_ctm-dn-sw-cn-ce-ll);
606
+ }
607
+
608
+ .cart_summary_show_coupon_value {
609
+ @include cartSummaryValue(--_ctm-dn-sw-cn-ce-ll);
610
+ }
611
+
612
+ // Embellishment Price, Attributes / Gift Card / Deal Amount have no section
613
+ // of their own. They set nothing here so they inherit the Cart Body Widget's
614
+ // typography rather than borrowing a neighbouring row's design scope.
855
615
  }
856
616
 
857
617
  .cart_summary_content_details_wrapper {
@@ -859,163 +619,30 @@ $overflowSelector: ".flex__overflow";
859
619
  flex-direction: column;
860
620
  gap: 8px;
861
621
 
862
- .cart_summary_shippingLabel_text {
863
- // font-size: 14px;
864
- // color: var(--_gray-500);
865
- font-family: var(
866
- --_ctm-mob-dn-sg-cs-ft-fy,
867
- var(--_ctm-tab-dn-sg-cs-ft-fy, var(--_ctm-dn-sg-cs-ft-fy))
868
- );
869
- color: var(
870
- --_ctm-mob-dn-sg-cs-cr,
871
- var(--_ctm-tab-dn-sg-cs-cr, var(--_ctm-dn-sg-cs-cr))
872
- );
873
- font-weight: var(
874
- --_ctm-mob-dn-sg-cs-ft-wt,
875
- var(--_ctm-tab-dn-sg-cs-ft-wt, var(--_ctm-dn-sg-cs-ft-wt))
876
- );
877
- font-size: var(
878
- --_ctm-mob-dn-sg-cs-ft-se,
879
- var(--_ctm-tab-dn-sg-cs-ft-se, var(--_ctm-dn-sg-cs-ft-se))
880
- );
881
- // font-size: 14px;
882
- text-decoration: var(
883
- --_ctm-mob-dn-sg-cs-ue,
884
- var(--_ctm-tab-dn-sg-cs-ue, var(--_ctm-dn-sg-cs-ue))
885
- );
886
- letter-spacing: var(
887
- --_ctm-mob-dn-sg-cs-lr-sg,
888
- var(--_ctm-tab-dn-sg-cs-lr-sg, var(--_ctm-dn-sg-cs-lr-sg))
889
- );
890
- line-height: var(
891
- --_ctm-mob-dn-sg-cs-le-ht,
892
- var(--_ctm-tab-dn-sg-cs-le-ht, var(--_ctm-dn-sg-cs-le-ht))
893
- );
894
- font-style: var(
895
- --_ctm-mob-dn-sg-cs-ft-se-ic,
896
- var(--_ctm-tab-dn-sg-cs-ft-se-ic, var(--_ctm-dn-sg-cs-ft-se-ic))
897
- );
898
- text-align: var(
899
- --_ctm-mob-dn-sg-cs-tt-an,
900
- var(--_ctm-tab-dn-sg-cs-tt-an, var(--_ctm-dn-sg-cs-tt-an))
901
- );
622
+ // Each row's padding comes from its own design section.
623
+ .cart_summary_number_text,
624
+ .cart_summary_number_value {
625
+ padding: prepareMediaVariable(--_ctm-dn-nr-of-is-pg);
902
626
  }
903
627
 
904
- .currency_span {
905
- font-family: var(
906
- --_ctm-mob-dn-sg-cs-ft-fy-dc,
907
- var(--_ctm-tab-dn-sg-cs-ft-fy-dc, var(--_ctm-dn-sg-cs-ft-fy-dc))
908
- );
909
- color: var(
910
- --_ctm-mob-dn-sg-cs-cr-dc,
911
- var(--_ctm-tab-dn-sg-cs-cr-dc, var(--_ctm-dn-sg-cs-cr-dc))
912
- );
913
- font-weight: var(
914
- --_ctm-mob-dn-sg-cs-ft-wt-dc,
915
- var(--_ctm-tab-dn-sg-cs-ft-wt-dc, var(--_ctm-dn-sg-cs-ft-wt-dc))
916
- );
917
- font-size: var(
918
- --_ctm-mob-dn-sg-cs-ft-se-dc,
919
- var(--_ctm-tab-dn-sg-cs-ft-se-dc, var(--_ctm-dn-sg-cs-ft-se-dc))
920
- );
921
- text-decoration: var(
922
- --_ctm-mob-dn-sg-cs-ue-dc,
923
- var(--_ctm-tab-dn-sg-cs-ue-dc, var(--_ctm-dn-sg-cs-ue-dc))
924
- );
925
- letter-spacing: var(
926
- --_ctm-mob-dn-sg-cs-lr-sg-dc,
927
- var(--_ctm-tab-dn-sg-cs-lr-sg-dc, var(--_ctm-dn-sg-cs-lr-sg-dc))
928
- );
929
- line-height: var(
930
- --_ctm-mob-dn-sg-cs-le-ht-dc,
931
- var(--_ctm-tab-dn-sg-cs-le-ht-dc, var(--_ctm-dn-sg-cs-le-ht-dc))
932
- );
933
- font-style: var(
934
- --_ctm-mob-dn-sg-cs-ft-se-ic-dc,
935
- var(--_ctm-tab-dn-sg-cs-ft-se-ic-dc, var(--_ctm-dn-sg-cs-ft-se-ic-dc))
936
- );
937
- text-align: var(
938
- --_ctm-mob-dn-sg-cs-tt-an-dc,
939
- var(--_ctm-tab-dn-sg-cs-tt-an-dc, var(--_ctm-dn-sg-cs-tt-an-dc))
940
- );
628
+ .cart_summary_subTotal_text,
629
+ .cart_summary_subTotal_value {
630
+ padding: prepareMediaVariable(--_ctm-dn-sb-tl-pg);
941
631
  }
942
632
 
943
- .cart_summary_tax_text {
944
- // font-size: 14px;
945
- // color: var(--_gray-500);
946
- font-family: var(
947
- --_ctm-mob-dn-tx-ft-fy,
948
- var(--_ctm-tab-dn-tx-ft-fy, var(--_ctm-dn-tx-ft-fy))
949
- );
950
- color: var(--_ctm-mob-dn-tx-cr, var(--_ctm-tab-dn-tx-cr, var(--_ctm-dn-tx-cr)));
951
- font-weight: var(
952
- --_ctm-mob-dn-tx-ft-wt,
953
- var(--_ctm-tab-dn-tx-ft-wt, var(--_ctm-dn-tx-ft-wt))
954
- );
955
- font-size: var(
956
- --_ctm-mob-dn-tx-ft-se,
957
- var(--_ctm-tab-dn-tx-ft-se, var(--_ctm-dn-tx-ft-se))
958
- );
959
- // font-size: 14px;
960
- text-decoration: var(
961
- --_ctm-mob-dn-tx-ue,
962
- var(--_ctm-tab-dn-tx-ue, var(--_ctm-dn-tx-ue))
963
- );
964
- letter-spacing: var(
965
- --_ctm-mob-dn-tx-lr-sg,
966
- var(--_ctm-tab-dn-tx-lr-sg, var(--_ctm-dn-tx-lr-sg))
967
- );
968
- line-height: var(
969
- --_ctm-mob-dn-tx-le-ht,
970
- var(--_ctm-tab-dn-tx-le-ht, var(--_ctm-dn-tx-le-ht))
971
- );
972
- font-style: var(
973
- --_ctm-mob-dn-tx-ft-se-ic,
974
- var(--_ctm-tab-dn-tx-ft-se-ic, var(--_ctm-dn-tx-ft-se-ic))
975
- );
976
- text-align: var(
977
- --_ctm-mob-dn-tx-tt-an,
978
- var(--_ctm-tab-dn-tx-tt-an, var(--_ctm-dn-tx-tt-an))
979
- );
633
+ .cart_summary_shippingLabel_text,
634
+ .cart_summary_shippingLabel_value {
635
+ padding: prepareMediaVariable(--_ctm-dn-sg-cs-pg);
980
636
  }
981
637
 
638
+ .cart_summary_tax_text,
982
639
  .cart_summary_tax_value {
983
- font-family: var(
984
- --_ctm-mob-dn-tx-ft-fy-dc,
985
- var(--_ctm-tab-dn-tx-ft-fy-dc, var(--_ctm-dn-tx-ft-fy-dc))
986
- );
987
- color: var(
988
- --_ctm-mob-dn-tx-cr-dc,
989
- var(--_ctm-tab-dn-tx-cr-dc, var(--_ctm-dn-tx-cr-dc))
990
- );
991
- font-weight: var(
992
- --_ctm-mob-dn-tx-ft-wt-dc,
993
- var(--_ctm-tab-dn-tx-ft-wt-dc, var(--_ctm-dn-tx-ft-wt-dc))
994
- );
995
- font-size: var(
996
- --_ctm-mob-dn-tx-ft-se-dc,
997
- var(--_ctm-tab-dn-tx-ft-se-dc, var(--_ctm-dn-tx-ft-se-dc))
998
- );
999
- text-decoration: var(
1000
- --_ctm-mob-dn-tx-ue-dc,
1001
- var(--_ctm-tab-dn-tx-ue-dc, var(--_ctm-dn-tx-ue-dc))
1002
- );
1003
- letter-spacing: var(
1004
- --_ctm-mob-dn-tx-lr-sg-dc,
1005
- var(--_ctm-tab-dn-tx-lr-sg-dc, var(--_ctm-dn-tx-lr-sg-dc))
1006
- );
1007
- line-height: var(
1008
- --_ctm-mob-dn-tx-le-ht-dc,
1009
- var(--_ctm-tab-dn-tx-le-ht-dc, var(--_ctm-dn-tx-le-ht-dc))
1010
- );
1011
- font-style: var(
1012
- --_ctm-mob-dn-tx-ft-se-ic-dc,
1013
- var(--_ctm-tab-dn-tx-ft-se-ic-dc, var(--_ctm-dn-tx-ft-se-ic-dc))
1014
- );
1015
- text-align: var(
1016
- --_ctm-mob-dn-tx-tt-an-dc,
1017
- var(--_ctm-tab-dn-tx-tt-an-dc, var(--_ctm-dn-tx-tt-an-dc))
1018
- );
640
+ padding: prepareMediaVariable(--_ctm-dn-tx-pg);
641
+ }
642
+
643
+ .cart_summary_show_coupon_text,
644
+ .cart_summary_show_coupon_value {
645
+ padding: prepareMediaVariable(--_ctm-dn-sw-cn-ce-ll-pg);
1019
646
  }
1020
647
  }
1021
648
 
@@ -1031,330 +658,42 @@ $overflowSelector: ".flex__overflow";
1031
658
  align-self: stretch;
1032
659
  justify-content: space-between;
1033
660
 
1034
- .cart_summary_subTotal_text {
1035
- font-family: var(
1036
- --_ctm-mob-dn-sb-tl-ft-fy,
1037
- var(--_ctm-tab-dn-sb-tl-ft-fy, var(--_ctm-dn-sb-tl-ft-fy))
1038
- );
1039
- color: var(
1040
- --_ctm-mob-dn-sb-tl-cr,
1041
- var(--_ctm-tab-dn-sb-tl-cr, var(--_ctm-dn-sb-tl-cr))
1042
- );
1043
- font-weight: var(
1044
- --_ctm-mob-dn-sb-tl-ft-wt,
1045
- var(--_ctm-tab-dn-sb-tl-ft-wt, var(--_ctm-dn-sb-tl-ft-wt))
1046
- );
1047
- font-size: var(
1048
- --_ctm-mob-dn-sb-tl-ft-se,
1049
- var(--_ctm-tab-dn-sb-tl-ft-se, var(--_ctm-dn-sb-tl-ft-se))
1050
- );
1051
- // font-size: 16px;
1052
- text-decoration: var(
1053
- --_ctm-mob-dn-sb-tl-ue,
1054
- var(--_ctm-tab-dn-sb-tl-ue, var(--_ctm-dn-sb-tl-ue))
1055
- );
1056
- letter-spacing: var(
1057
- --_ctm-mob-dn-sb-tl-lr-sg,
1058
- var(--_ctm-tab-dn-sb-tl-lr-sg, var(--_ctm-dn-sb-tl-lr-sg))
1059
- );
1060
- line-height: var(
1061
- --_ctm-mob-dn-sb-tl-le-ht,
1062
- var(--_ctm-tab-dn-sb-tl-le-ht, var(--_ctm-dn-sb-tl-le-ht))
1063
- );
1064
- font-style: var(
1065
- --_ctm-mob-dn-sb-tl-ft-se-ic,
1066
- var(--_ctm-tab-dn-sb-tl-ft-se-ic, var(--_ctm-dn-sb-tl-ft-se-ic))
1067
- );
1068
- text-align: var(
1069
- --_ctm-mob-dn-sb-tl-tt-an,
1070
- var(--_ctm-tab-dn-sb-tl-tt-an, var(--_ctm-dn-sb-tl-tt-an))
1071
- );
1072
- }
1073
-
1074
- .cart_summary_subTotal_value {
1075
- .currency_span {
1076
- font-family: var(
1077
- --_ctm-mob-dn-sb-tl-ft-fy-dc,
1078
- var(--_ctm-tab-dn-sb-tl-ft-fy-dc, var(--_ctm-dn-sb-tl-ft-fy-dc))
1079
- );
1080
- color: var(
1081
- --_ctm-mob-dn-sb-tl-cr-dc,
1082
- var(--_ctm-tab-dn-sb-tl-cr-dc, var(--_ctm-dn-sb-tl-cr-dc))
1083
- );
1084
- font-weight: var(
1085
- --_ctm-mob-dn-sb-tl-ft-wt-dc,
1086
- var(--_ctm-tab-dn-sb-tl-ft-wt-dc, var(--_ctm-dn-sb-tl-ft-wt-dc))
1087
- );
1088
- font-size: var(
1089
- --_ctm-mob-dn-sb-tl-ft-se-dc,
1090
- var(--_ctm-tab-dn-sb-tl-ft-se-dc, var(--_ctm-dn-sb-tl-ft-se-dc))
1091
- );
1092
- // font-size: 16px;
1093
- text-decoration: var(
1094
- --_ctm-mob-dn-sb-tl-ue-dc,
1095
- var(--_ctm-tab-dn-sb-tl-ue-dc, var(--_ctm-dn-sb-tl-ue-dc))
1096
- );
1097
- letter-spacing: var(
1098
- --_ctm-mob-dn-sb-tl-lr-sg-dc,
1099
- var(--_ctm-tab-dn-sb-tl-lr-sg-dc, var(--_ctm-dn-sb-tl-lr-sg-dc))
1100
- );
1101
- line-height: var(
1102
- --_ctm-mob-dn-sb-tl-le-ht-dc,
1103
- var(--_ctm-tab-dn-sb-tl-le-ht-dc, var(--_ctm-dn-sb-tl-le-ht-dc))
1104
- );
1105
- font-style: var(
1106
- --_ctm-mob-dn-sb-tl-ft-se-ic-dc,
1107
- var(--_ctm-tab-dn-sb-tl-ft-se-ic-dc, var(--_ctm-dn-sb-tl-ft-se-ic-dc))
1108
- );
1109
- text-align: var(
1110
- --_ctm-mob-dn-sb-tl-tt-an-dc,
1111
- var(--_ctm-tab-dn-sb-tl-tt-an-dc, var(--_ctm-dn-sb-tl-tt-an-dc))
1112
- );
1113
- }
1114
- }
1115
-
661
+ // Total
1116
662
  .cart_summary_total_text {
1117
- font-family: var(
1118
- --_ctm-mob-dn-tl-ft-fy,
1119
- var(--_ctm-tab-dn-tl-ft-fy, var(--_ctm-dn-tl-ft-fy))
1120
- );
1121
- color: var(--_ctm-mob-dn-tl-cr, var(--_ctm-tab-dn-tl-cr, var(--_ctm-dn-tl-cr)));
1122
- font-weight: var(
1123
- --_ctm-mob-dn-tl-ft-wt,
1124
- var(--_ctm-tab-dn-tl-ft-wt, var(--_ctm-dn-tl-ft-wt))
1125
- );
1126
- font-size: var(
1127
- --_ctm-mob-dn-tl-ft-se,
1128
- var(--_ctm-tab-dn-tl-ft-se, var(--_ctm-dn-tl-ft-se))
1129
- );
1130
- // font-size: 20px;
1131
- text-decoration: var(
1132
- --_ctm-mob-dn-tl-ue,
1133
- var(--_ctm-tab-dn-tl-ue, var(--_ctm-dn-tl-ue))
1134
- );
1135
- letter-spacing: var(
1136
- --_ctm-mob-dn-tl-lr-sg,
1137
- var(--_ctm-tab-dn-tl-lr-sg, var(--_ctm-dn-tl-lr-sg))
1138
- );
1139
- line-height: var(
1140
- --_ctm-mob-dn-tl-le-ht,
1141
- var(--_ctm-tab-dn-tl-le-ht, var(--_ctm-dn-tl-le-ht))
1142
- );
1143
- font-style: var(
1144
- --_ctm-mob-dn-tl-ft-se-ic,
1145
- var(--_ctm-tab-dn-tl-ft-se-ic, var(--_ctm-dn-tl-ft-se-ic))
1146
- );
1147
- text-align: var(
1148
- --_ctm-mob-dn-tl-tt-an,
1149
- var(--_ctm-tab-dn-tl-tt-an, var(--_ctm-dn-tl-tt-an))
1150
- );
663
+ @include cartSummaryLabel(--_ctm-dn-tl);
664
+ padding: prepareMediaVariable(--_ctm-dn-tl-pg);
1151
665
  }
1152
666
 
1153
667
  .cart_summary_total_value {
1154
- .currency_span {
1155
- font-family: var(
1156
- --_ctm-mob-dn-tl-ft-fy-dc,
1157
- var(--_ctm-tab-dn-tl-ft-fy-dc, var(--_ctm-dn-tl-ft-fy-dc))
1158
- );
1159
- color: var(
1160
- --_ctm-mob-dn-tl-cr-dc,
1161
- var(--_ctm-tab-dn-tl-cr-dc, var(--_ctm-dn-tl-cr-dc))
1162
- );
1163
- font-weight: var(
1164
- --_ctm-mob-dn-tl-ft-wt-dc,
1165
- var(--_ctm-tab-dn-tl-ft-wt-dc, var(--_ctm-dn-tl-ft-wt-dc))
1166
- );
1167
- font-size: var(
1168
- --_ctm-mob-dn-tl-ft-se-dc,
1169
- var(--_ctm-tab-dn-tl-ft-se-dc, var(--_ctm-dn-tl-ft-se-dc))
1170
- );
1171
- // font-size: 20px;
1172
- text-decoration: var(
1173
- --_ctm-mob-dn-tl-ue-dc,
1174
- var(--_ctm-tab-dn-tl-ue-dc, var(--_ctm-dn-tl-ue-dc,))
1175
- );
1176
- letter-spacing: var(
1177
- --_ctm-mob-dn-tl-lr-sg-dc,
1178
- var(--_ctm-tab-dn-tl-lr-sg-dc, var(--_ctm-dn-tl-lr-sg-dc))
1179
- );
1180
- line-height: var(
1181
- --_ctm-mob-dn-tl-le-ht-dc,
1182
- var(--_ctm-tab-dn-tl-le-ht-dc, var(--_ctm-dn-tl-le-ht-dc))
1183
- );
1184
- font-style: var(
1185
- --_ctm-mob-dn-tl-ft-se-ic-dc,
1186
- var(--_ctm-tab-dn-tl-ft-se-ic-dc, var(--_ctm-dn-tl-ft-se-ic-dc))
1187
- );
1188
- text-align: var(
1189
- --_ctm-mob-dn-tl-tt-an-dc,
1190
- var(--_ctm-tab-dn-tl-tt-an-dc, var(--_ctm-dn-tl-tt-an-dc))
1191
- );
1192
- }
668
+ @include cartSummaryValue(--_ctm-dn-tl);
669
+ padding: prepareMediaVariable(--_ctm-dn-tl-pg);
1193
670
  }
1194
671
  }
1195
672
  }
1196
673
  }
1197
674
 
675
+ // Product Name
1198
676
  .cart_summary_heading_text {
1199
- // color: var(--_ctm-dn-hg-tt-dn-cr);
1200
- // font-family: var(--_ctm-dn-hg-tt-dn-ft-fy);
1201
- // font-size: var(--_ctm-dn-hg-tt-dn-ft-se);
1202
- // font-style: var(--_ctm-dn-hg-tt-dn-ft-se-ic);
1203
- // font-weight: var(--_ctm-dn-hg-tt-dn-ft-wt);
1204
- // line-height: var(--_ctm-dn-hg-tt-dn-le-ht);
1205
- // letter-spacing: var(--_ctm-dn-hg-tt-dn-lr-sg);
1206
- // text-align: var(--_ctm-dn-hg-tt-dn-tt-an);
1207
- // text-decoration: var(--_ctm-dn-hg-tt-dn-ue);
1208
- // display: -webkit-box;
1209
- // -webkit-line-clamp: 2;
1210
- /* Show exactly 2 lines */
1211
- // -webkit-box-orient: vertical;
1212
- // overflow: hidden;
1213
- // text-overflow: ellipsis;
1214
- font-family: var(
1215
- --_ctm-mob-dn-pt-wt-pt-ne-ft-fy,
1216
- var(--_ctm-tab-dn-pt-wt-pt-ne-ft-fy, var(--_ctm-dn-pt-wt-pt-ne-ft-fy))
1217
- );
1218
- color: var(
1219
- --_ctm-mob-dn-pt-wt-pt-ne-cr,
1220
- var(--_ctm-tab-dn-pt-wt-pt-ne-cr, var(--_ctm-dn-pt-wt-pt-ne-cr))
1221
- );
1222
- font-weight: var(
1223
- --_ctm-mob-dn-pt-wt-pt-ne-ft-wt,
1224
- var(--_ctm-tab-dn-pt-wt-pt-ne-ft-wt, var(--_ctm-dn-pt-wt-pt-ne-ft-wt))
1225
- );
1226
- font-size: var(
1227
- --_ctm-mob-dn-pt-wt-pt-ne-ft-se,
1228
- var(--_ctm-tab-dn-pt-wt-pt-ne-ft-se, var(--_ctm-dn-pt-wt-pt-ne-ft-se))
1229
- );
1230
- // font-size: 14px;
1231
- // pt-wt-pt-pe-ue pt-wt-pt-ne-ue
1232
- text-decoration: var(
1233
- --_ctm-mob-pt-wt-pt-pe-ue,
1234
- var(--_ctm-tab-pt-wt-pt-pe-ue, var(--_ctm-pt-wt-pt-pe-ue))
1235
- );
1236
- letter-spacing: var(
1237
- --_ctm-mob-dn-pt-wt-pt-ne-lr-sg,
1238
- var(--_ctm-tab-dn-pt-wt-pt-ne-lr-sg, var(--_ctm-dn-pt-wt-pt-ne-lr-sg))
1239
- );
1240
- line-height: var(
1241
- --_ctm-mob-dn-pt-wt-pt-ne-le-ht,
1242
- var(--_ctm-tab-dn-pt-wt-pt-ne-le-ht, var(--_ctm-dn-pt-wt-pt-ne-le-ht))
1243
- );
1244
- font-style: var(
1245
- --_ctm-mob-dn-pt-wt-pt-ne-ft-se-ic,
1246
- var(--_ctm-tab-dn-pt-wt-pt-ne-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ne-ft-se-ic))
1247
- );
1248
- text-align: var(
1249
- --_ctm-mob-dn-pt-wt-pt-ne-tt-an,
1250
- var(--_ctm-tab-dn-pt-wt-pt-ne-tt-an, var(--_ctm-dn-pt-wt-pt-ne-tt-an))
1251
- );
1252
- padding: var(
1253
- --_ctm-mob-dn-pt-wt-pt-ne-pg,
1254
- var(--_ctm-tab-dn-pt-wt-pt-ne-pg, var(--_ctm-dn-pt-wt-pt-ne-pg))
1255
- );
677
+ @include cartSummaryLabel(--_ctm-dn-pt-wt-pt-ne);
678
+ padding: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ne-pg);
679
+
1256
680
  &#{$overflowSelector} {
1257
681
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1258
682
  }
1259
683
  }
1260
684
 
685
+ // Product Price. The amount is rendered by CurrencyDisplay as a nested
686
+ // `.currency_span`, which inherits every one of these.
1261
687
  .cart_summary_primary_text {
1262
- // color: var(--_ctm-dn-py-tt-dn-cr);
1263
- // font-family: var(--_ctm-dn-py-tt-dn-ft-fy);
1264
- // font-size: var(--_ctm-dn-py-tt-dn-ft-se);
1265
- // font-style: var(--_ctm-dn-py-tt-dn-ft-se-ic);
1266
- // font-weight: var(--_ctm-dn-py-tt-dn-ft-wt);
1267
- // line-height: var(--_ctm-dn-py-tt-dn-le-ht);
1268
- // letter-spacing: var(--_ctm-dn-py-tt-dn-lr-sg);
1269
- // text-align: var(--_ctm-dn-py-tt-dn-tt-an);
1270
- // text-decoration: var(--_ctm-dn-py-tt-dn-ue);
1271
- font-family: var(
1272
- --_ctm-mob-dn-pt-wt-pt-pe-ft-fy,
1273
- var(--_ctm-tab-dn-pt-wt-pt-pe-ft-fy, var(--_ctm-dn-pt-wt-pt-pe-ft-fy))
1274
- );
1275
- color: var(
1276
- --_ctm-mob-dn-pt-wt-pt-pe-cr,
1277
- var(--_ctm-tab-dn-pt-wt-pt-pe-cr, var(--_ctm-dn-pt-wt-pt-pe-cr))
1278
- );
1279
- font-weight: var(
1280
- --_ctm-mob-dn-pt-wt-pt-pe-ft-wt,
1281
- var(--_ctm-tab-dn-pt-wt-pt-pe-ft-wt, var(--_ctm-dn-pt-wt-pt-pe-ft-wt))
1282
- );
1283
- // font-size: var(
1284
- // --_ctm-mob-dn-pt-wt-pt-pe-ft-se,
1285
- // var(--_ctm-tab-dn-pt-wt-pt-pe-ft-se, var(--_ctm-dn-pt-wt-pt-pe-ft-se))
1286
- // );
1287
- font-size: 12px;
1288
- text-decoration: var(
1289
- --_ctm-mob-dn-pt-wt-pt-pe-ue,
1290
- var(--_ctm-tab-dn-pt-wt-pt-pe-ue, var(--_ctm-dn-pt-wt-pt-pe-ue))
1291
- );
1292
- letter-spacing: var(
1293
- --_ctm-mob-dn-pt-wt-pt-pe-lr-sg,
1294
- var(--_ctm-tab-dn-pt-wt-pt-pe-lr-sg, var(--_ctm-dn-pt-wt-pt-pe-lr-sg))
1295
- );
1296
- line-height: var(
1297
- --_ctm-mob-dn-pt-wt-pt-pe-le-ht,
1298
- var(--_ctm-tab-dn-pt-wt-pt-pe-le-ht, var(--_ctm-dn-pt-wt-pt-pe-le-ht))
1299
- );
1300
- font-style: var(
1301
- --_ctm-mob-dn-pt-wt-pt-pe-ft-se-ic,
1302
- var(--_ctm-tab-dn-pt-wt-pt-pe-ft-se-ic, var(--_ctm-dn-pt-wt-pt-pe-ft-se-ic))
1303
- );
1304
- text-align: var(
1305
- --_ctm-mob-dn-pt-wt-pt-ne-tt-an,
1306
- var(--_ctm-tab-dn-pt-wt-pt-ne-tt-an, var(--_ctm-dn-pt-wt-pt-ne-tt-an))
1307
- );
1308
- padding: var(
1309
- --_ctm-mob-dn-pt-wt-pt-pe-pg,
1310
- var(--_ctm-tab-dn-pt-wt-pt-pe-pg, var(--_ctm-dn-pt-wt-pt-pe-pg))
1311
- );
688
+ @include cartSummaryLabel(--_ctm-dn-pt-wt-pt-pe);
689
+ padding: prepareMediaVariable(--_ctm-dn-pt-wt-pt-pe-pg);
1312
690
  margin-top: 2px;
1313
- // width: 20%;
1314
691
  }
1315
692
 
693
+ // Product Code
1316
694
  .cart_summary_product_text {
1317
- font-family: var(
1318
- --_ctm-mob-dn-pt-wt-pt-ce-ft-fy,
1319
- var(--_ctm-tab-dn-pt-wt-pt-ce-ft-fy, var(--_ctm-dn-pt-wt-pt-ce-ft-fy))
1320
- );
1321
- color: var(
1322
- --_ctm-mob-dn-pt-wt-pt-ce-cr,
1323
- var(--_ctm-tab-dn-pt-wt-pt-ce-cr, var(--_ctm-dn-pt-wt-pt-ce-cr))
1324
- );
1325
- font-weight: var(
1326
- --_ctm-mob-dn-pt-wt-pt-ce-ft-wt,
1327
- var(--_ctm-tab-dn-pt-wt-pt-ce-ft-wt, var(--_ctm-dn-pt-wt-pt-ce-ft-wt))
1328
- );
1329
- font-size: var(
1330
- --_ctm-mob-dn-pt-wt-pt-ce-ft-se,
1331
- var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se, var(--_ctm-dn-pt-wt-pt-ce-ft-se))
1332
- );
1333
- // font-size: 12px;
1334
- text-decoration: var(
1335
- --_ctm-mob-dn-pt-wt-pt-pe-ue,
1336
- var(--_ctm-tab-dn-pt-wt-pt-pe-ue, var(--_ctm-dn-pt-wt-pt-pe-ue))
1337
- );
1338
- letter-spacing: var(
1339
- --_ctm-mob-dn-pt-wt-pt-ce-lr-sg,
1340
- var(--_ctm-tab-dn-pt-wt-pt-ce-lr-sg, var(--_ctm-dn-pt-wt-pt-ce-lr-sg))
1341
- );
1342
- line-height: var(
1343
- --_ctm-mob-dn-pt-wt-pt-ce-le-ht,
1344
- var(--_ctm-tab-dn-pt-wt-pt-ce-le-ht, var(--_ctm-dn-pt-wt-pt-ce-le-ht))
1345
- );
1346
- font-style: var(
1347
- --_ctm-mob-dn-pt-wt-pt-ce-ft-se-ic,
1348
- var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se-ic, var(--_ctm-dn-pt-wt-pt-ce-ft-se-ic))
1349
- );
1350
- text-align: var(
1351
- --_ctm-mob-dn-pt-wt-pt-ce-tt-an,
1352
- var(--_ctm-tab-dn-pt-wt-pt-ce-tt-an, var(--_ctm-dn-pt-wt-pt-ce-tt-an))
1353
- );
1354
- padding: var(
1355
- --_ctm-mob-dn-pt-wt-pt-ce-pg,
1356
- var(--_ctm-tab-dn-pt-wt-pt-ce-pg, var(--_ctm-dn-pt-wt-pt-ce-pg))
1357
- );
695
+ @include cartSummaryLabel(--_ctm-dn-pt-wt-pt-ce);
696
+ padding: prepareMediaVariable(--_ctm-dn-pt-wt-pt-ce-pg);
1358
697
  word-break: break-word;
1359
698
  }
1360
699
 
@@ -1587,6 +926,7 @@ $overflowSelector: ".flex__overflow";
1587
926
  --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-tt-an)};
1588
927
  --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-lr-sg)};
1589
928
  --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-le-ht)};
929
+ --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-tt-tm)};
1590
930
 
1591
931
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-se)};
1592
932
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-se)};
@@ -1655,7 +995,16 @@ $overflowSelector: ".flex__overflow";
1655
995
 
1656
996
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-le-ht));
1657
997
 
1658
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
998
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-ue));
999
+
1000
+ text-transform: var(
1001
+ --_sf-hr-txt-tr,
1002
+ prepareMediaVariable(--_ctm-dn-ct-as-ct-dt-se-tt-tm)
1003
+ );
1004
+
1005
+ &#{$overflowSelector} {
1006
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1007
+ }
1659
1008
  }
1660
1009
 
1661
1010
  .icon {
@@ -1738,6 +1087,7 @@ $overflowSelector: ".flex__overflow";
1738
1087
  --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-tt-an)};
1739
1088
  --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-lr-sg)};
1740
1089
  --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-le-ht)};
1090
+ --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-tt-tm)};
1741
1091
 
1742
1092
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-in-se)};
1743
1093
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-pe-or-hr-se-in-se)};
@@ -1821,7 +1171,16 @@ $overflowSelector: ".flex__overflow";
1821
1171
 
1822
1172
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-le-ht));
1823
1173
 
1824
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1174
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-ue));
1175
+
1176
+ text-transform: var(
1177
+ --_sf-hr-txt-tr,
1178
+ prepareMediaVariable(--_ctm-dn-ct-as-pe-or-dt-se-tt-tm)
1179
+ );
1180
+
1181
+ &#{$overflowSelector} {
1182
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1183
+ }
1825
1184
  }
1826
1185
 
1827
1186
  .icon {
@@ -1911,6 +1270,7 @@ $overflowSelector: ".flex__overflow";
1911
1270
  --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-tt-an)};
1912
1271
  --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-lr-sg)};
1913
1272
  --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-le-ht)};
1273
+ --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-tt-tm)};
1914
1274
 
1915
1275
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-se)};
1916
1276
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-se)};
@@ -1993,7 +1353,16 @@ $overflowSelector: ".flex__overflow";
1993
1353
 
1994
1354
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-le-ht));
1995
1355
 
1996
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1356
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-ue));
1357
+
1358
+ text-transform: var(
1359
+ --_sf-hr-txt-tr,
1360
+ prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-dt-se-tt-tm)
1361
+ );
1362
+
1363
+ &#{$overflowSelector} {
1364
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1365
+ }
1997
1366
  }
1998
1367
 
1999
1368
  .icon {
@@ -2076,6 +1445,7 @@ $overflowSelector: ".flex__overflow";
2076
1445
  --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-tt-an)};
2077
1446
  --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-lr-sg)};
2078
1447
  --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-le-ht)};
1448
+ --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-tt-tm)};
2079
1449
 
2080
1450
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-se)};
2081
1451
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-se)};
@@ -2158,7 +1528,16 @@ $overflowSelector: ".flex__overflow";
2158
1528
 
2159
1529
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-le-ht));
2160
1530
 
2161
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1531
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-ue));
1532
+
1533
+ text-transform: var(
1534
+ --_sf-hr-txt-tr,
1535
+ prepareMediaVariable(--_ctm-dn-ct-as-rw-or-dt-se-tt-tm)
1536
+ );
1537
+
1538
+ &#{$overflowSelector} {
1539
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1540
+ }
2162
1541
  }
2163
1542
 
2164
1543
  .icon {
@@ -2241,6 +1620,7 @@ $overflowSelector: ".flex__overflow";
2241
1620
  --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-tt-an)};
2242
1621
  --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-lr-sg)};
2243
1622
  --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-le-ht)};
1623
+ --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-tt-tm)};
2244
1624
 
2245
1625
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-se)};
2246
1626
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-se)};
@@ -2341,7 +1721,19 @@ $overflowSelector: ".flex__overflow";
2341
1721
  prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-le-ht)
2342
1722
  );
2343
1723
 
2344
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1724
+ text-decoration: var(
1725
+ --_sf-hr-ue,
1726
+ prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-ue)
1727
+ );
1728
+
1729
+ text-transform: var(
1730
+ --_sf-hr-txt-tr,
1731
+ prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-dt-se-tt-tm)
1732
+ );
1733
+
1734
+ &#{$overflowSelector} {
1735
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1736
+ }
2345
1737
  }
2346
1738
 
2347
1739
  .icon {
@@ -2427,6 +1819,7 @@ $overflowSelector: ".flex__overflow";
2427
1819
  --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-tt-an)};
2428
1820
  --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-lr-sg)};
2429
1821
  --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-le-ht)};
1822
+ --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-tt-tm)};
2430
1823
 
2431
1824
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-se)};
2432
1825
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-se)};
@@ -2510,7 +1903,16 @@ $overflowSelector: ".flex__overflow";
2510
1903
 
2511
1904
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-le-ht));
2512
1905
 
2513
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1906
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-ue));
1907
+
1908
+ text-transform: var(
1909
+ --_sf-hr-txt-tr,
1910
+ prepareMediaVariable(--_ctm-dn-ct-as-st-qe-dt-se-tt-tm)
1911
+ );
1912
+
1913
+ &#{$overflowSelector} {
1914
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1915
+ }
2514
1916
  }
2515
1917
 
2516
1918
  .icon {
@@ -2593,6 +1995,7 @@ $overflowSelector: ".flex__overflow";
2593
1995
  --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-tt-an)};
2594
1996
  --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-lr-sg)};
2595
1997
  --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-le-ht)};
1998
+ --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-tt-tm)};
2596
1999
 
2597
2000
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-in-se)};
2598
2001
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-sn-up-hr-se-in-se)};
@@ -2676,7 +2079,16 @@ $overflowSelector: ".flex__overflow";
2676
2079
 
2677
2080
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-le-ht));
2678
2081
 
2679
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2082
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-ue));
2083
+
2084
+ text-transform: var(
2085
+ --_sf-hr-txt-tr,
2086
+ prepareMediaVariable(--_ctm-dn-ct-as-sn-up-dt-se-tt-tm)
2087
+ );
2088
+
2089
+ &#{$overflowSelector} {
2090
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2091
+ }
2680
2092
  }
2681
2093
 
2682
2094
  .icon {
@@ -3105,43 +2517,14 @@ $overflowSelector: ".flex__overflow";
3105
2517
  }
3106
2518
  }
3107
2519
 
2520
+ // Coupon Code. Letter spacing used to read the Header Container's variable and
2521
+ // the underline a doubled-up `dn-dn-` name, so neither followed this section.
3108
2522
  .coupon_code_text {
3109
- // color: var(--_primary-400);
3110
- font-family: var(
3111
- --_ctm-mob-dn-cn-ce-ft-fy,
3112
- var(--_ctm-tab-dn-cn-ce-ft-fy, var(--_ctm-dn-cn-ce-ft-fy))
3113
- );
3114
- // color: var(--_ctm-mob-dn-cn-ce-cr, var(--_ctm-tab-dn-cn-ce-cr, var(--_ctm-dn-cn-ce-cr)));
2523
+ @include cartSummaryLabel(--_ctm-dn-cn-ce);
2524
+ // Kept: the coupon link's colour follows the theme's link colour, not the
2525
+ // section's text colour.
3115
2526
  color: var(--_thm-cs-tt-ls-as);
3116
- font-weight: var(
3117
- --_ctm-mob-dn-cn-ce-ft-wt,
3118
- var(--_ctm-tab-dn-cn-ce-ft-wt, var(--_ctm-dn-cn-ce-ft-wt))
3119
- );
3120
- font-size: var(
3121
- --_ctm-mob-dn-cn-ce-ft-se,
3122
- var(--_ctm-tab-dn-cn-ce-ft-se, var(--_ctm-dn-cn-ce-ft-se))
3123
- );
3124
- text-decoration: var(
3125
- --_ctm-mob-dn-dn-cn-ce-ue,
3126
- var(--_ctm-tab-dn-dn-cn-ce-ue, var(--_ctm-dn-dn-cn-ce-ue))
3127
- );
3128
- letter-spacing: var(
3129
- --_ctm-mob-dn-hr-cr-lr-sg,
3130
- var(--_ctm-tab-dn-hr-cr-lr-sg, var(--_ctm-dn-hr-cr-lr-sg))
3131
- );
3132
- line-height: var(
3133
- --_ctm-mob-dn-cn-ce-le-ht,
3134
- var(--_ctm-tab-dn-cn-ce-le-ht, var(--_ctm-dn-cn-ce-le-ht))
3135
- );
3136
- font-style: var(
3137
- --_ctm-mob-dn-cn-ce-ft-se-ic,
3138
- var(--_ctm-tab-dn-cn-ce-ft-se-ic, var(--_ctm-dn-cn-ce-ft-se-ic))
3139
- );
3140
- text-align: var(
3141
- --_ctm-mob-dn-cn-ce-tt-an,
3142
- var(--_ctm-tab-dn-cn-ce-tt-an, var(--_ctm-dn-cn-ce-tt-an))
3143
- );
3144
- padding: var(--_ctm-mob-dn-cn-ce-pg, var(--_ctm-tab-dn-cn-ce-pg, var(--_ctm-dn-cn-ce-pg)));
2527
+ padding: prepareMediaVariable(--_ctm-dn-cn-ce-pg);
3145
2528
  }
3146
2529
  }
3147
2530
  }