@sc-360-v2/storefront-cms-library 0.5.12 → 0.5.14

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 (20) hide show
  1. package/dist/add-products-tab-uom-details.scss +1001 -0
  2. package/dist/add-products-tab.scss +1 -0
  3. package/dist/allocationDetails.scss +7 -0
  4. package/dist/builder.js +1 -1
  5. package/dist/builderLite.js +1 -1
  6. package/dist/category.scss +73 -73
  7. package/dist/hotspot.scss +431 -397
  8. package/dist/language-selector.scss +1 -0
  9. package/dist/last-x-orders.scss +263 -0
  10. package/dist/product-labels.scss +836 -0
  11. package/dist/product-price.scss +768 -398
  12. package/dist/quick-inventory-check.scss +263 -0
  13. package/dist/quota-details.scss +82 -0
  14. package/dist/repeater.scss +42 -1
  15. package/dist/types/builder/enums/index.d.ts +3 -0
  16. package/dist/types/builder/tools/element-edit/imageHotspot.d.ts +1 -2
  17. package/dist/types/builder/tools/element-edit/quotaDetails.d.ts +3 -2
  18. package/dist/website.js +1 -1
  19. package/dist/widget.scss +150 -148
  20. package/package.json +1 -1
package/dist/product-price.scss CHANGED
@@ -51,6 +51,17 @@
51
51
  flex-direction: column;
52
52
  width: 100%;
53
53
 
54
+ &.product-price--inline {
55
+ flex-direction: row;
56
+ align-items: center;
57
+ flex-wrap: wrap;
58
+ gap: 4px;
59
+
60
+ .price-range-separator {
61
+ color: var(--_ctm-mob-dn-pt-pe-cr, var(--_ctm-tab-dn-pt-pe-cr, var(--_ctm-dn-pt-pe-cr)));
62
+ }
63
+ }
64
+
54
65
  border-color: var(
55
66
  --_show-border,
56
67
  var(--_ctm-mob-dn-pt-pe-br-cr, var(--_ctm-tab-dn-pt-pe-br-cr, var(--_ctm-dn-pt-pe-br-cr)))
@@ -336,6 +347,8 @@
336
347
  var(--_ctm-tab-dn-um-se-sw-cr, var(--_ctm-dn-um-se-sw-cr))
337
348
  )
338
349
  );
350
+
351
+ padding: var(--_ctm-mob-dn-um-se-pg, var(--_ctm-tab-dn-um-se-pg, var(--_ctm-dn-um-se-pg)));
339
352
  }
340
353
  .denominations_container {
341
354
  // font-size: 16px;
@@ -1223,417 +1236,360 @@
1223
1236
  );
1224
1237
  }
1225
1238
  }
1226
- .product-actual-price {
1227
- .actual-price-span {
1228
- background-color: var(
1229
- --_ctm-mob-dn-al-pe-bd-cr,
1230
- var(--_ctm-tab-dn-al-pe-bd-cr, var(--_ctm-dn-al-pe-bd-cr))
1231
- );
1232
- color: var(--_ctm-mob-dn-al-pe-cr, var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr)));
1233
- font-family: var(
1234
- --_ctm-mob-dn-al-pe-ft-fy,
1235
- var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
1236
- );
1237
- font-size: var(
1238
- --_ctm-mob-dn-al-pe-ft-se,
1239
- var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
1240
- );
1241
- font-weight: var(
1242
- --_ctm-mob-dn-al-pe-ft-wt,
1243
- var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
1244
- );
1245
- font-style: var(
1246
- --_ctm-mob-dn-al-pe-ft-se-ic,
1247
- var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
1248
- );
1249
- text-align: var(
1250
- --_ctm-mob-dn-al-pe-tt-an,
1251
- var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
1252
- );
1253
- letter-spacing: var(
1254
- --_ctm-mob-dn-al-pe-lr-sg,
1255
- var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
1256
- );
1257
- line-height: var(
1258
- --_ctm-mob-dn-al-pe-le-ht,
1259
- var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
1260
- );
1261
- text-decoration: var(
1262
- --_ctm-mob-dn-al-pe-ue,
1263
- var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
1264
- );
1239
+ }
1240
+ .product-actual-price {
1241
+ .code-span {
1242
+ background-color: var(
1243
+ --_ctm-mob-dn-cy-ce-se-bd-cr,
1244
+ var(--_ctm-tab-dn-cy-ce-se-bd-cr, var(--_ctm-dn-cy-ce-se-bd-cr))
1245
+ );
1246
+ color: var(
1247
+ --_ctm-mob-dn-cy-ce-se-cr,
1248
+ var(--_ctm-tab-dn-cy-ce-se-cr, var(--_ctm-dn-cy-ce-se-cr))
1249
+ );
1250
+ font-family: var(
1251
+ --_ctm-mob-dn-cy-ce-se-ft-fy,
1252
+ var(--_ctm-tab-dn-cy-ce-se-ft-fy, var(--_ctm-dn-cy-ce-se-ft-fy))
1253
+ );
1254
+ font-size: var(
1255
+ --_ctm-mob-dn-cy-ce-se-ft-se,
1256
+ var(--_ctm-tab-dn-cy-ce-se-ft-se, var(--_ctm-dn-cy-ce-se-ft-se))
1257
+ );
1258
+ font-weight: var(
1259
+ --_ctm-mob-dn-cy-ce-se-ft-wt,
1260
+ var(--_ctm-tab-dn-cy-ce-se-ft-wt, var(--_ctm-dn-cy-ce-se-ft-wt))
1261
+ );
1262
+ font-style: var(
1263
+ --_ctm-mob-dn-cy-ce-se-ft-se-ic,
1264
+ var(--_ctm-tab-dn-cy-ce-se-ft-se-ic, var(--_ctm-dn-cy-ce-se-ft-se-ic))
1265
+ );
1266
+ text-align: var(
1267
+ --_ctm-mob-dn-cy-ce-se-tt-an,
1268
+ var(--_ctm-tab-dn-cy-ce-se-tt-an, var(--_ctm-dn-cy-ce-se-tt-an))
1269
+ );
1270
+ letter-spacing: var(
1271
+ --_ctm-mob-dn-cy-ce-se-lr-sg,
1272
+ var(--_ctm-tab-dn-cy-ce-se-lr-sg, var(--_ctm-dn-cy-ce-se-lr-sg))
1273
+ );
1274
+ line-height: var(
1275
+ --_ctm-mob-dn-cy-ce-se-le-ht,
1276
+ var(--_ctm-tab-dn-cy-ce-se-le-ht, var(--_ctm-dn-cy-ce-se-le-ht))
1277
+ );
1278
+ text-decoration: var(
1279
+ --_ctm-mob-dn-cy-ce-se-ue,
1280
+ var(--_ctm-tab-dn-cy-ce-se-ue, var(--_ctm-dn-cy-ce-se-ue))
1281
+ );
1265
1282
 
1266
- border-color: var(
1267
- --_show-border,
1283
+ border-color: var(
1284
+ --_show-border,
1285
+ var(
1286
+ --_ctm-mob-dn-cy-ce-se-br-cr,
1287
+ var(--_ctm-tab-dn-cy-ce-se-br-cr, var(--_ctm-dn-cy-ce-se-br-cr))
1288
+ )
1289
+ );
1290
+ border-style: var(
1291
+ --_show-border,
1292
+ var(
1293
+ --_ctm-mob-dn-cy-ce-se-br-se,
1294
+ var(--_ctm-tab-dn-cy-ce-se-br-se, var(--_ctm-dn-cy-ce-se-br-se))
1295
+ )
1296
+ );
1297
+ border-width: var(
1298
+ --_show-border,
1299
+ var(
1300
+ --_ctm-mob-dn-cy-ce-se-br-wh,
1301
+ var(--_ctm-tab-dn-cy-ce-se-br-wh, var(--_ctm-dn-cy-ce-se-br-wh))
1302
+ )
1303
+ );
1304
+ border-radius: var(
1305
+ --_ctm-mob-dn-cy-ce-se-br-rs,
1306
+ var(--_ctm-tab-dn-cy-ce-se-br-rs, var(--_ctm-dn-cy-ce-se-br-rs))
1307
+ );
1308
+
1309
+ box-shadow: var(
1310
+ --_show-shadow,
1311
+ var(
1312
+ --_ctm-mob-dn-cy-ce-se-sw-ae,
1313
+ var(--_ctm-tab-dn-cy-ce-se-sw-ae, var(--_ctm-dn-cy-ce-se-sw-ae))
1314
+ )
1268
1315
  var(
1269
- --_ctm-mob-dn-al-pe-br-cr,
1270
- var(--_ctm-tab-dn-al-pe-br-cr, var(--_ctm-dn-al-pe-br-cr))
1316
+ --_ctm-mob-dn-cy-ce-se-sw-br,
1317
+ var(--_ctm-tab-dn-cy-ce-se-sw-br, var(--_ctm-dn-cy-ce-se-sw-br))
1271
1318
  )
1272
- );
1273
- border-style: var(
1274
- --_show-border,
1275
1319
  var(
1276
- --_ctm-mob-dn-al-pe-br-se,
1277
- var(--_ctm-tab-dn-al-pe-br-se, var(--_ctm-dn-al-pe-br-se))
1320
+ --_ctm-mob-dn-cy-ce-se-sw-sd,
1321
+ var(--_ctm-tab-dn-cy-ce-se-sw-sd, var(--_ctm-dn-cy-ce-se-sw-sd))
1278
1322
  )
1279
- );
1280
- border-width: var(
1281
- --_show-border,
1282
1323
  var(
1283
- --_ctm-mob-dn-al-pe-br-wh,
1284
- var(--_ctm-tab-dn-al-pe-br-wh, var(--_ctm-dn-al-pe-br-wh))
1324
+ --_ctm-mob-dn-cy-ce-se-sw-cr,
1325
+ var(--_ctm-tab-dn-cy-ce-se-sw-cr, var(--_ctm-dn-cy-ce-se-sw-cr))
1285
1326
  )
1286
- );
1287
- border-radius: var(
1288
- --_ctm-mob-dn-al-pe-br-rs,
1289
- var(--_ctm-tab-dn-al-pe-br-rs, var(--_ctm-dn-al-pe-br-rs))
1290
- );
1327
+ );
1328
+ }
1291
1329
 
1292
- box-shadow: var(
1293
- --_show-shadow,
1294
- var(
1295
- --_ctm-mob-dn-al-pe-sw-ae,
1296
- var(--_ctm-tab-dn-al-pe-sw-ae, var(--_ctm-dn-al-pe-sw-ae))
1297
- )
1298
- var(
1299
- --_ctm-mob-dn-al-pe-sw-br,
1300
- var(--_ctm-tab-dn-al-pe-sw-br, var(--_ctm-dn-al-pe-sw-br))
1301
- )
1302
- var(
1303
- --_ctm-mob-dn-al-pe-sw-sd,
1304
- var(--_ctm-tab-dn-al-pe-sw-sd, var(--_ctm-dn-al-pe-sw-sd))
1305
- )
1306
- var(
1307
- --_ctm-mob-dn-al-pe-sw-cr,
1308
- var(--_ctm-tab-dn-al-pe-sw-cr, var(--_ctm-dn-al-pe-sw-cr))
1309
- )
1310
- );
1311
- }
1330
+ .uom-span {
1331
+ background-color: var(
1332
+ --_ctm-mob-dn-um-se-bd-cr,
1333
+ var(--_ctm-tab-dn-um-se-bd-cr, var(--_ctm-dn-um-se-bd-cr))
1334
+ );
1335
+ color: var(--_ctm-mob-dn-um-se-cr, var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr)));
1336
+ font-family: var(
1337
+ --_ctm-mob-dn-um-se-ft-fy,
1338
+ var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
1339
+ );
1340
+ font-size: var(
1341
+ --_ctm-mob-dn-um-se-ft-se,
1342
+ var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
1343
+ );
1344
+ font-weight: var(
1345
+ --_ctm-mob-dn-um-se-ft-wt,
1346
+ var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
1347
+ );
1348
+ font-style: var(
1349
+ --_ctm-mob-dn-um-se-ft-se-ic,
1350
+ var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
1351
+ );
1352
+ text-align: var(
1353
+ --_ctm-mob-dn-um-se-tt-an,
1354
+ var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
1355
+ );
1356
+ letter-spacing: var(
1357
+ --_ctm-mob-dn-um-se-lr-sg,
1358
+ var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
1359
+ );
1360
+ line-height: var(
1361
+ --_ctm-mob-dn-um-se-le-ht,
1362
+ var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
1363
+ );
1364
+ text-decoration: var(
1365
+ --_ctm-mob-dn-um-se-ue,
1366
+ var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
1367
+ );
1312
1368
 
1313
- .code-span {
1314
- background-color: var(
1315
- --_ctm-mob-dn-cy-ce-se-bd-cr,
1316
- var(--_ctm-tab-dn-cy-ce-se-bd-cr, var(--_ctm-dn-cy-ce-se-bd-cr))
1317
- );
1318
- color: var(
1319
- --_ctm-mob-dn-cy-ce-se-cr,
1320
- var(--_ctm-tab-dn-cy-ce-se-cr, var(--_ctm-dn-cy-ce-se-cr))
1321
- );
1322
- font-family: var(
1323
- --_ctm-mob-dn-cy-ce-se-ft-fy,
1324
- var(--_ctm-tab-dn-cy-ce-se-ft-fy, var(--_ctm-dn-cy-ce-se-ft-fy))
1325
- );
1326
- font-size: var(
1327
- --_ctm-mob-dn-cy-ce-se-ft-se,
1328
- var(--_ctm-tab-dn-cy-ce-se-ft-se, var(--_ctm-dn-cy-ce-se-ft-se))
1329
- );
1330
- font-weight: var(
1331
- --_ctm-mob-dn-cy-ce-se-ft-wt,
1332
- var(--_ctm-tab-dn-cy-ce-se-ft-wt, var(--_ctm-dn-cy-ce-se-ft-wt))
1333
- );
1334
- font-style: var(
1335
- --_ctm-mob-dn-cy-ce-se-ft-se-ic,
1336
- var(--_ctm-tab-dn-cy-ce-se-ft-se-ic, var(--_ctm-dn-cy-ce-se-ft-se-ic))
1337
- );
1338
- text-align: var(
1339
- --_ctm-mob-dn-cy-ce-se-tt-an,
1340
- var(--_ctm-tab-dn-cy-ce-se-tt-an, var(--_ctm-dn-cy-ce-se-tt-an))
1341
- );
1342
- letter-spacing: var(
1343
- --_ctm-mob-dn-cy-ce-se-lr-sg,
1344
- var(--_ctm-tab-dn-cy-ce-se-lr-sg, var(--_ctm-dn-cy-ce-se-lr-sg))
1345
- );
1346
- line-height: var(
1347
- --_ctm-mob-dn-cy-ce-se-le-ht,
1348
- var(--_ctm-tab-dn-cy-ce-se-le-ht, var(--_ctm-dn-cy-ce-se-le-ht))
1349
- );
1350
- text-decoration: var(
1351
- --_ctm-mob-dn-cy-ce-se-ue,
1352
- var(--_ctm-tab-dn-cy-ce-se-ue, var(--_ctm-dn-cy-ce-se-ue))
1353
- );
1369
+ border-color: var(
1370
+ --_show-border,
1371
+ var(--_ctm-mob-dn-um-se-br-cr, var(--_ctm-tab-dn-um-se-br-cr, var(--_ctm-dn-um-se-br-cr)))
1372
+ );
1373
+ border-style: var(
1374
+ --_show-border,
1375
+ var(--_ctm-mob-dn-um-se-br-se, var(--_ctm-tab-dn-um-se-br-se, var(--_ctm-dn-um-se-br-se)))
1376
+ );
1377
+ border-width: var(
1378
+ --_show-border,
1379
+ var(--_ctm-mob-dn-um-se-br-wh, var(--_ctm-tab-dn-um-se-br-wh, var(--_ctm-dn-um-se-br-wh)))
1380
+ );
1381
+ border-radius: var(
1382
+ --_ctm-mob-dn-um-se-br-rs,
1383
+ var(--_ctm-tab-dn-um-se-br-rs, var(--_ctm-dn-um-se-br-rs))
1384
+ );
1354
1385
 
1355
- border-color: var(
1356
- --_show-border,
1386
+ box-shadow: var(
1387
+ --_show-shadow,
1388
+ var(--_ctm-mob-dn-um-se-sw-ae, var(--_ctm-tab-dn-um-se-sw-ae, var(--_ctm-dn-um-se-sw-ae)))
1357
1389
  var(
1358
- --_ctm-mob-dn-cy-ce-se-br-cr,
1359
- var(--_ctm-tab-dn-cy-ce-se-br-cr, var(--_ctm-dn-cy-ce-se-br-cr))
1390
+ --_ctm-mob-dn-um-se-sw-br,
1391
+ var(--_ctm-tab-dn-um-se-sw-br, var(--_ctm-dn-um-se-sw-br))
1360
1392
  )
1361
- );
1362
- border-style: var(
1363
- --_show-border,
1364
1393
  var(
1365
- --_ctm-mob-dn-cy-ce-se-br-se,
1366
- var(--_ctm-tab-dn-cy-ce-se-br-se, var(--_ctm-dn-cy-ce-se-br-se))
1394
+ --_ctm-mob-dn-um-se-sw-sd,
1395
+ var(--_ctm-tab-dn-um-se-sw-sd, var(--_ctm-dn-um-se-sw-sd))
1367
1396
  )
1368
- );
1369
- border-width: var(
1370
- --_show-border,
1371
1397
  var(
1372
- --_ctm-mob-dn-cy-ce-se-br-wh,
1373
- var(--_ctm-tab-dn-cy-ce-se-br-wh, var(--_ctm-dn-cy-ce-se-br-wh))
1398
+ --_ctm-mob-dn-um-se-sw-cr,
1399
+ var(--_ctm-tab-dn-um-se-sw-cr, var(--_ctm-dn-um-se-sw-cr))
1374
1400
  )
1375
- );
1376
- border-radius: var(
1377
- --_ctm-mob-dn-cy-ce-se-br-rs,
1378
- var(--_ctm-tab-dn-cy-ce-se-br-rs, var(--_ctm-dn-cy-ce-se-br-rs))
1379
- );
1401
+ );
1402
+ }
1403
+ }
1380
1404
 
1381
- box-shadow: var(
1382
- --_show-shadow,
1383
- var(
1384
- --_ctm-mob-dn-cy-ce-se-sw-ae,
1385
- var(--_ctm-tab-dn-cy-ce-se-sw-ae, var(--_ctm-dn-cy-ce-se-sw-ae))
1386
- )
1387
- var(
1388
- --_ctm-mob-dn-cy-ce-se-sw-br,
1389
- var(--_ctm-tab-dn-cy-ce-se-sw-br, var(--_ctm-dn-cy-ce-se-sw-br))
1390
- )
1391
- var(
1392
- --_ctm-mob-dn-cy-ce-se-sw-sd,
1393
- var(--_ctm-tab-dn-cy-ce-se-sw-sd, var(--_ctm-dn-cy-ce-se-sw-sd))
1394
- )
1395
- var(
1396
- --_ctm-mob-dn-cy-ce-se-sw-cr,
1397
- var(--_ctm-tab-dn-cy-ce-se-sw-cr, var(--_ctm-dn-cy-ce-se-sw-cr))
1398
- )
1399
- );
1400
- }
1401
-
1402
- .uom-span {
1403
- background-color: var(
1404
- --_ctm-mob-dn-um-se-bd-cr,
1405
- var(--_ctm-tab-dn-um-se-bd-cr, var(--_ctm-dn-um-se-bd-cr))
1406
- );
1407
- color: var(--_ctm-mob-dn-um-se-cr, var(--_ctm-tab-dn-um-se-cr, var(--_ctm-dn-um-se-cr)));
1408
- font-family: var(
1409
- --_ctm-mob-dn-um-se-ft-fy,
1410
- var(--_ctm-tab-dn-um-se-ft-fy, var(--_ctm-dn-um-se-ft-fy))
1411
- );
1412
- font-size: var(
1413
- --_ctm-mob-dn-um-se-ft-se,
1414
- var(--_ctm-tab-dn-um-se-ft-se, var(--_ctm-dn-um-se-ft-se))
1415
- );
1416
- font-weight: var(
1417
- --_ctm-mob-dn-um-se-ft-wt,
1418
- var(--_ctm-tab-dn-um-se-ft-wt, var(--_ctm-dn-um-se-ft-wt))
1419
- );
1420
- font-style: var(
1421
- --_ctm-mob-dn-um-se-ft-se-ic,
1422
- var(--_ctm-tab-dn-um-se-ft-se-ic, var(--_ctm-dn-um-se-ft-se-ic))
1423
- );
1424
- text-align: var(
1425
- --_ctm-mob-dn-um-se-tt-an,
1426
- var(--_ctm-tab-dn-um-se-tt-an, var(--_ctm-dn-um-se-tt-an))
1427
- );
1428
- letter-spacing: var(
1429
- --_ctm-mob-dn-um-se-lr-sg,
1430
- var(--_ctm-tab-dn-um-se-lr-sg, var(--_ctm-dn-um-se-lr-sg))
1431
- );
1432
- line-height: var(
1433
- --_ctm-mob-dn-um-se-le-ht,
1434
- var(--_ctm-tab-dn-um-se-le-ht, var(--_ctm-dn-um-se-le-ht))
1435
- );
1436
- text-decoration: var(
1437
- --_ctm-mob-dn-um-se-ue,
1438
- var(--_ctm-tab-dn-um-se-ue, var(--_ctm-dn-um-se-ue))
1439
- );
1405
+ .actual-price-span {
1406
+ background-color: var(
1407
+ --_ctm-mob-dn-al-pe-bd-cr,
1408
+ var(--_ctm-tab-dn-al-pe-bd-cr, var(--_ctm-dn-al-pe-bd-cr))
1409
+ );
1410
+ color: var(--_ctm-mob-dn-al-pe-cr, var(--_ctm-tab-dn-al-pe-cr, var(--_ctm-dn-al-pe-cr)));
1411
+ font-family: var(
1412
+ --_ctm-mob-dn-al-pe-ft-fy,
1413
+ var(--_ctm-tab-dn-al-pe-ft-fy, var(--_ctm-dn-al-pe-ft-fy))
1414
+ );
1415
+ font-size: var(
1416
+ --_ctm-mob-dn-al-pe-ft-se,
1417
+ var(--_ctm-tab-dn-al-pe-ft-se, var(--_ctm-dn-al-pe-ft-se))
1418
+ );
1419
+ font-weight: var(
1420
+ --_ctm-mob-dn-al-pe-ft-wt,
1421
+ var(--_ctm-tab-dn-al-pe-ft-wt, var(--_ctm-dn-al-pe-ft-wt))
1422
+ );
1423
+ font-style: var(
1424
+ --_ctm-mob-dn-al-pe-ft-se-ic,
1425
+ var(--_ctm-tab-dn-al-pe-ft-se-ic, var(--_ctm-dn-al-pe-ft-se-ic))
1426
+ );
1427
+ text-align: var(
1428
+ --_ctm-mob-dn-al-pe-tt-an,
1429
+ var(--_ctm-tab-dn-al-pe-tt-an, var(--_ctm-dn-al-pe-tt-an))
1430
+ );
1431
+ letter-spacing: var(
1432
+ --_ctm-mob-dn-al-pe-lr-sg,
1433
+ var(--_ctm-tab-dn-al-pe-lr-sg, var(--_ctm-dn-al-pe-lr-sg))
1434
+ );
1435
+ line-height: var(
1436
+ --_ctm-mob-dn-al-pe-le-ht,
1437
+ var(--_ctm-tab-dn-al-pe-le-ht, var(--_ctm-dn-al-pe-le-ht))
1438
+ );
1439
+ text-decoration: var(
1440
+ --_ctm-mob-dn-al-pe-ue,
1441
+ var(--_ctm-tab-dn-al-pe-ue, var(--_ctm-dn-al-pe-ue))
1442
+ );
1440
1443
 
1441
- border-color: var(
1442
- --_show-border,
1443
- var(
1444
- --_ctm-mob-dn-um-se-br-cr,
1445
- var(--_ctm-tab-dn-um-se-br-cr, var(--_ctm-dn-um-se-br-cr))
1446
- )
1447
- );
1448
- border-style: var(
1449
- --_show-border,
1450
- var(
1451
- --_ctm-mob-dn-um-se-br-se,
1452
- var(--_ctm-tab-dn-um-se-br-se, var(--_ctm-dn-um-se-br-se))
1453
- )
1454
- );
1455
- border-width: var(
1456
- --_show-border,
1457
- var(
1458
- --_ctm-mob-dn-um-se-br-wh,
1459
- var(--_ctm-tab-dn-um-se-br-wh, var(--_ctm-dn-um-se-br-wh))
1460
- )
1461
- );
1462
- border-radius: var(
1463
- --_ctm-mob-dn-um-se-br-rs,
1464
- var(--_ctm-tab-dn-um-se-br-rs, var(--_ctm-dn-um-se-br-rs))
1465
- );
1444
+ border-color: var(
1445
+ --_show-border,
1446
+ var(--_ctm-mob-dn-al-pe-br-cr, var(--_ctm-tab-dn-al-pe-br-cr, var(--_ctm-dn-al-pe-br-cr)))
1447
+ );
1448
+ border-style: var(
1449
+ --_show-border,
1450
+ var(--_ctm-mob-dn-al-pe-br-se, var(--_ctm-tab-dn-al-pe-br-se, var(--_ctm-dn-al-pe-br-se)))
1451
+ );
1452
+ border-width: var(
1453
+ --_show-border,
1454
+ var(--_ctm-mob-dn-al-pe-br-wh, var(--_ctm-tab-dn-al-pe-br-wh, var(--_ctm-dn-al-pe-br-wh)))
1455
+ );
1456
+ border-radius: var(
1457
+ --_ctm-mob-dn-al-pe-br-rs,
1458
+ var(--_ctm-tab-dn-al-pe-br-rs, var(--_ctm-dn-al-pe-br-rs))
1459
+ );
1466
1460
 
1467
- box-shadow: var(
1468
- --_show-shadow,
1469
- var(
1470
- --_ctm-mob-dn-um-se-sw-ae,
1471
- var(--_ctm-tab-dn-um-se-sw-ae, var(--_ctm-dn-um-se-sw-ae))
1472
- )
1473
- var(
1474
- --_ctm-mob-dn-um-se-sw-br,
1475
- var(--_ctm-tab-dn-um-se-sw-br, var(--_ctm-dn-um-se-sw-br))
1476
- )
1477
- var(
1478
- --_ctm-mob-dn-um-se-sw-sd,
1479
- var(--_ctm-tab-dn-um-se-sw-sd, var(--_ctm-dn-um-se-sw-sd))
1480
- )
1481
- var(
1482
- --_ctm-mob-dn-um-se-sw-cr,
1483
- var(--_ctm-tab-dn-um-se-sw-cr, var(--_ctm-dn-um-se-sw-cr))
1484
- )
1485
- );
1486
- }
1487
- }
1461
+ box-shadow: var(
1462
+ --_show-shadow,
1463
+ var(--_ctm-mob-dn-al-pe-sw-ae, var(--_ctm-tab-dn-al-pe-sw-ae, var(--_ctm-dn-al-pe-sw-ae)))
1464
+ var(--_ctm-mob-dn-al-pe-sw-br, var(--_ctm-tab-dn-al-pe-sw-br, var(--_ctm-dn-al-pe-sw-br)))
1465
+ var(--_ctm-mob-dn-al-pe-sw-sd, var(--_ctm-tab-dn-al-pe-sw-sd, var(--_ctm-dn-al-pe-sw-sd)))
1466
+ var(--_ctm-mob-dn-al-pe-sw-cr, var(--_ctm-tab-dn-al-pe-sw-cr, var(--_ctm-dn-al-pe-sw-cr)))
1467
+ );
1488
1468
  }
1489
- .product-savings {
1490
- .product-savings-wrapper {
1491
- .savings-percent-span {
1492
- background-color: var(
1493
- --_ctm-mob-dn-ss-bd-cr,
1494
- var(--_ctm-tab-dn-ss-bd-cr, var(--_ctm-dn-ss-bd-cr))
1495
- );
1496
- color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
1497
- font-family: var(
1498
- --_ctm-mob-dn-ss-ft-fy,
1499
- var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
1500
- );
1501
- font-size: var(
1502
- --_ctm-mob-dn-ss-ft-se,
1503
- var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se))
1504
- );
1505
- font-weight: var(
1506
- --_ctm-mob-dn-ss-ft-wt,
1507
- var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
1508
- );
1509
- font-style: var(
1510
- --_ctm-mob-dn-ss-ft-se-ic,
1511
- var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
1512
- );
1513
- text-align: var(
1514
- --_ctm-mob-dn-ss-tt-an,
1515
- var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an))
1516
- );
1517
- letter-spacing: var(
1518
- --_ctm-mob-dn-ss-lr-sg,
1519
- var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
1520
- );
1521
- line-height: var(
1522
- --_ctm-mob-dn-ss-le-ht,
1523
- var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
1524
- );
1525
- text-decoration: var(--_ctm-mob-dn-ss-ue, var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue)));
1526
1469
 
1527
- border-color: var(
1528
- --_show-border,
1529
- var(--_ctm-mob-dn-ss-br-cr, var(--_ctm-tab-dn-ss-br-cr, var(--_ctm-dn-ss-br-cr)))
1530
- );
1531
- border-style: var(
1532
- --_show-border,
1533
- var(--_ctm-mob-dn-ss-br-se, var(--_ctm-tab-dn-ss-br-se, var(--_ctm-dn-ss-br-se)))
1534
- );
1535
- border-width: var(
1536
- --_show-border,
1537
- var(--_ctm-mob-dn-ss-br-wh, var(--_ctm-tab-dn-ss-br-wh, var(--_ctm-dn-ss-br-wh)))
1538
- );
1539
- border-radius: var(
1540
- --_ctm-mob-dn-ss-br-rs,
1541
- var(--_ctm-tab-dn-ss-br-rs, var(--_ctm-dn-ss-br-rs))
1542
- );
1470
+ .savings-percent-span {
1471
+ background-color: var(
1472
+ --_ctm-mob-dn-ss-bd-cr,
1473
+ var(--_ctm-tab-dn-ss-bd-cr, var(--_ctm-dn-ss-bd-cr))
1474
+ );
1475
+ color: var(--_ctm-mob-dn-ss-cr, var(--_ctm-tab-dn-ss-cr, var(--_ctm-dn-ss-cr)));
1476
+ font-family: var(
1477
+ --_ctm-mob-dn-ss-ft-fy,
1478
+ var(--_ctm-tab-dn-ss-ft-fy, var(--_ctm-dn-ss-ft-fy))
1479
+ );
1480
+ font-size: var(--_ctm-mob-dn-ss-ft-se, var(--_ctm-tab-dn-ss-ft-se, var(--_ctm-dn-ss-ft-se)));
1481
+ font-weight: var(
1482
+ --_ctm-mob-dn-ss-ft-wt,
1483
+ var(--_ctm-tab-dn-ss-ft-wt, var(--_ctm-dn-ss-ft-wt))
1484
+ );
1485
+ font-style: var(
1486
+ --_ctm-mob-dn-ss-ft-se-ic,
1487
+ var(--_ctm-tab-dn-ss-ft-se-ic, var(--_ctm-dn-ss-ft-se-ic))
1488
+ );
1489
+ text-align: var(--_ctm-mob-dn-ss-tt-an, var(--_ctm-tab-dn-ss-tt-an, var(--_ctm-dn-ss-tt-an)));
1490
+ letter-spacing: var(
1491
+ --_ctm-mob-dn-ss-lr-sg,
1492
+ var(--_ctm-tab-dn-ss-lr-sg, var(--_ctm-dn-ss-lr-sg))
1493
+ );
1494
+ line-height: var(
1495
+ --_ctm-mob-dn-ss-le-ht,
1496
+ var(--_ctm-tab-dn-ss-le-ht, var(--_ctm-dn-ss-le-ht))
1497
+ );
1498
+ text-decoration: var(--_ctm-mob-dn-ss-ue, var(--_ctm-tab-dn-ss-ue, var(--_ctm-dn-ss-ue)));
1543
1499
 
1544
- box-shadow: var(
1545
- --_show-shadow,
1546
- var(--_ctm-mob-dn-ss-sw-ae, var(--_ctm-tab-dn-ss-sw-ae, var(--_ctm-dn-ss-sw-ae)))
1547
- var(--_ctm-mob-dn-ss-sw-br, var(--_ctm-tab-dn-ss-sw-br, var(--_ctm-dn-ss-sw-br)))
1548
- var(--_ctm-mob-dn-ss-sw-sd, var(--_ctm-tab-dn-ss-sw-sd, var(--_ctm-dn-ss-sw-sd)))
1549
- var(--_ctm-mob-dn-ss-sw-cr, var(--_ctm-tab-dn-ss-sw-cr, var(--_ctm-dn-ss-sw-cr)))
1550
- );
1551
- }
1552
- .savings-value-span {
1553
- background-color: var(
1554
- --_ctm-mob-dn-ss-ve-bd-cr,
1555
- var(--_ctm-tab-dn-ss-ve-bd-cr, var(--_ctm-dn-ss-ve-bd-cr))
1556
- );
1557
- color: var(--_ctm-mob-dn-ss-ve-cr, var(--_ctm-tab-dn-ss-ve-cr, var(--_ctm-dn-ss-ve-cr)));
1558
- font-family: var(
1559
- --_ctm-mob-dn-ss-ve-ft-fy,
1560
- var(--_ctm-tab-dn-ss-ve-ft-fy, var(--_ctm-dn-ss-ve-ft-fy))
1561
- );
1562
- font-size: var(
1563
- --_ctm-mob-dn-ss-ve-ft-se,
1564
- var(--_ctm-tab-dn-ss-ve-ft-se, var(--_ctm-dn-ss-ve-ft-se))
1565
- );
1566
- font-weight: var(
1567
- --_ctm-mob-dn-ss-ve-ft-wt,
1568
- var(--_ctm-tab-dn-ss-ve-ft-wt, var(--_ctm-dn-ss-ve-ft-wt))
1569
- );
1570
- font-style: var(
1571
- --_ctm-mob-dn-ss-ve-ft-se-ic,
1572
- var(--_ctm-tab-dn-ss-ve-ft-se-ic, var(--_ctm-dn-ss-ve-ft-se-ic))
1573
- );
1574
- text-align: var(
1575
- --_ctm-mob-dn-ss-ve-tt-an,
1576
- var(--_ctm-tab-dn-ss-ve-tt-an, var(--_ctm-dn-ss-ve-tt-an))
1577
- );
1578
- letter-spacing: var(
1579
- --_ctm-mob-dn-ss-ve-lr-sg,
1580
- var(--_ctm-tab-dn-ss-ve-lr-sg, var(--_ctm-dn-ss-ve-lr-sg))
1581
- );
1582
- line-height: var(
1583
- --_ctm-mob-dn-ss-ve-le-ht,
1584
- var(--_ctm-tab-dn-ss-ve-le-ht, var(--_ctm-dn-ss-ve-le-ht))
1585
- );
1586
- text-decoration: var(
1587
- --_ctm-mob-dn-ss-ve-ue,
1588
- var(--_ctm-tab-dn-ss-ve-ue, var(--_ctm-dn-ss-ve-ue))
1589
- );
1500
+ border-color: var(
1501
+ --_show-border,
1502
+ var(--_ctm-mob-dn-ss-br-cr, var(--_ctm-tab-dn-ss-br-cr, var(--_ctm-dn-ss-br-cr)))
1503
+ );
1504
+ border-style: var(
1505
+ --_show-border,
1506
+ var(--_ctm-mob-dn-ss-br-se, var(--_ctm-tab-dn-ss-br-se, var(--_ctm-dn-ss-br-se)))
1507
+ );
1508
+ border-width: var(
1509
+ --_show-border,
1510
+ var(--_ctm-mob-dn-ss-br-wh, var(--_ctm-tab-dn-ss-br-wh, var(--_ctm-dn-ss-br-wh)))
1511
+ );
1512
+ border-radius: var(
1513
+ --_ctm-mob-dn-ss-br-rs,
1514
+ var(--_ctm-tab-dn-ss-br-rs, var(--_ctm-dn-ss-br-rs))
1515
+ );
1590
1516
 
1591
- border-color: var(
1592
- --_show-border,
1593
- var(
1594
- --_ctm-mob-dn-ss-ve-br-cr,
1595
- var(--_ctm-tab-dn-ss-ve-br-cr, var(--_ctm-dn-ss-ve-br-cr))
1596
- )
1597
- );
1598
- border-style: var(
1599
- --_show-border,
1600
- var(
1601
- --_ctm-mob-dn-ss-ve-br-se,
1602
- var(--_ctm-tab-dn-ss-ve-br-se, var(--_ctm-dn-ss-ve-br-se))
1603
- )
1604
- );
1605
- border-width: var(
1606
- --_show-border,
1607
- var(
1608
- --_ctm-mob-dn-ss-ve-br-wh,
1609
- var(--_ctm-tab-dn-ss-ve-br-wh, var(--_ctm-dn-ss-ve-br-wh))
1610
- )
1611
- );
1612
- border-radius: var(
1613
- --_ctm-mob-dn-ss-ve-br-rs,
1614
- var(--_ctm-tab-dn-ss-ve-br-rs, var(--_ctm-dn-ss-ve-br-rs))
1615
- );
1517
+ box-shadow: var(
1518
+ --_show-shadow,
1519
+ var(--_ctm-mob-dn-ss-sw-ae, var(--_ctm-tab-dn-ss-sw-ae, var(--_ctm-dn-ss-sw-ae)))
1520
+ var(--_ctm-mob-dn-ss-sw-br, var(--_ctm-tab-dn-ss-sw-br, var(--_ctm-dn-ss-sw-br)))
1521
+ var(--_ctm-mob-dn-ss-sw-sd, var(--_ctm-tab-dn-ss-sw-sd, var(--_ctm-dn-ss-sw-sd)))
1522
+ var(--_ctm-mob-dn-ss-sw-cr, var(--_ctm-tab-dn-ss-sw-cr, var(--_ctm-dn-ss-sw-cr)))
1523
+ );
1524
+ }
1525
+ .savings-value-span {
1526
+ padding: var(--_ctm-mob-dn-ss-ve-pg, var(--_ctm-tab-dn-ss-ve-pg, var(--_ctm-dn-ss-ve-pg)));
1616
1527
 
1617
- box-shadow: var(
1618
- --_show-shadow,
1619
- var(
1620
- --_ctm-mob-dn-ss-ve-sw-ae,
1621
- var(--_ctm-tab-dn-ss-ve-sw-ae, var(--_ctm-dn-ss-ve-sw-ae))
1622
- )
1623
- var(
1624
- --_ctm-mob-dn-ss-ve-sw-br,
1625
- var(--_ctm-tab-dn-ss-ve-sw-br, var(--_ctm-dn-ss-ve-sw-br))
1626
- )
1627
- var(
1628
- --_ctm-mob-dn-ss-ve-sw-sd,
1629
- var(--_ctm-tab-dn-ss-ve-sw-sd, var(--_ctm-dn-ss-ve-sw-sd))
1630
- )
1631
- var(
1632
- --_ctm-mob-dn-ss-ve-sw-cr,
1633
- var(--_ctm-tab-dn-ss-ve-sw-cr, var(--_ctm-dn-ss-ve-sw-cr))
1634
- )
1635
- );
1636
- }
1528
+ background-color: var(
1529
+ --_ctm-mob-dn-ss-ve-bd-cr,
1530
+ var(--_ctm-tab-dn-ss-ve-bd-cr, var(--_ctm-dn-ss-ve-bd-cr))
1531
+ );
1532
+ color: var(--_ctm-mob-dn-ss-ve-cr, var(--_ctm-tab-dn-ss-ve-cr, var(--_ctm-dn-ss-ve-cr)));
1533
+ font-family: var(
1534
+ --_ctm-mob-dn-ss-ve-ft-fy,
1535
+ var(--_ctm-tab-dn-ss-ve-ft-fy, var(--_ctm-dn-ss-ve-ft-fy))
1536
+ );
1537
+ font-size: var(
1538
+ --_ctm-mob-dn-ss-ve-ft-se,
1539
+ var(--_ctm-tab-dn-ss-ve-ft-se, var(--_ctm-dn-ss-ve-ft-se))
1540
+ );
1541
+ font-weight: var(
1542
+ --_ctm-mob-dn-ss-ve-ft-wt,
1543
+ var(--_ctm-tab-dn-ss-ve-ft-wt, var(--_ctm-dn-ss-ve-ft-wt))
1544
+ );
1545
+ font-style: var(
1546
+ --_ctm-mob-dn-ss-ve-ft-se-ic,
1547
+ var(--_ctm-tab-dn-ss-ve-ft-se-ic, var(--_ctm-dn-ss-ve-ft-se-ic))
1548
+ );
1549
+ text-align: var(
1550
+ --_ctm-mob-dn-ss-ve-tt-an,
1551
+ var(--_ctm-tab-dn-ss-ve-tt-an, var(--_ctm-dn-ss-ve-tt-an))
1552
+ );
1553
+ letter-spacing: var(
1554
+ --_ctm-mob-dn-ss-ve-lr-sg,
1555
+ var(--_ctm-tab-dn-ss-ve-lr-sg, var(--_ctm-dn-ss-ve-lr-sg))
1556
+ );
1557
+ line-height: var(
1558
+ --_ctm-mob-dn-ss-ve-le-ht,
1559
+ var(--_ctm-tab-dn-ss-ve-le-ht, var(--_ctm-dn-ss-ve-le-ht))
1560
+ );
1561
+ text-decoration: var(
1562
+ --_ctm-mob-dn-ss-ve-ue,
1563
+ var(--_ctm-tab-dn-ss-ve-ue, var(--_ctm-dn-ss-ve-ue))
1564
+ );
1565
+
1566
+ border-color: var(
1567
+ --_show-border,
1568
+ var(--_ctm-mob-dn-ss-ve-br-cr, var(--_ctm-tab-dn-ss-ve-br-cr, var(--_ctm-dn-ss-ve-br-cr)))
1569
+ );
1570
+ border-style: var(
1571
+ --_show-border,
1572
+ var(--_ctm-mob-dn-ss-ve-br-se, var(--_ctm-tab-dn-ss-ve-br-se, var(--_ctm-dn-ss-ve-br-se)))
1573
+ );
1574
+ border-width: var(
1575
+ --_show-border,
1576
+ var(--_ctm-mob-dn-ss-ve-br-wh, var(--_ctm-tab-dn-ss-ve-br-wh, var(--_ctm-dn-ss-ve-br-wh)))
1577
+ );
1578
+ border-radius: var(
1579
+ --_ctm-mob-dn-ss-ve-br-rs,
1580
+ var(--_ctm-tab-dn-ss-ve-br-rs, var(--_ctm-dn-ss-ve-br-rs))
1581
+ );
1582
+
1583
+ box-shadow: var(
1584
+ --_show-shadow,
1585
+ var(--_ctm-mob-dn-ss-ve-sw-ae, var(--_ctm-tab-dn-ss-ve-sw-ae, var(--_ctm-dn-ss-ve-sw-ae)))
1586
+ var(--_ctm-mob-dn-ss-ve-sw-br, var(--_ctm-tab-dn-ss-ve-sw-br, var(--_ctm-dn-ss-ve-sw-br)))
1587
+ var(--_ctm-mob-dn-ss-ve-sw-sd, var(--_ctm-tab-dn-ss-ve-sw-sd, var(--_ctm-dn-ss-ve-sw-sd)))
1588
+ var(--_ctm-mob-dn-ss-ve-sw-cr, var(--_ctm-tab-dn-ss-ve-sw-cr, var(--_ctm-dn-ss-ve-sw-cr)))
1589
+ );
1590
+ }
1591
+ .product-savings {
1592
+ .product-savings-wrapper {
1637
1593
  .code-span {
1638
1594
  background-color: var(
1639
1595
  --_ctm-mob-dn-cy-ce-se-bd-cr,
@@ -1975,12 +1931,231 @@
1975
1931
  );
1976
1932
  }
1977
1933
  }
1934
+ .savings-container {
1935
+ display: flex;
1936
+ flex-direction: row;
1937
+ gap: 12px;
1938
+ align-items: center;
1939
+ }
1978
1940
  .price-text-element {
1979
1941
  // background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
1980
1942
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
1981
1943
  display: flex;
1982
1944
  flex-direction: column;
1983
- gap: 10px;
1945
+ gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
1946
+ align-items: flex-start;
1947
+
1948
+ &.price-text-element--label-bottom {
1949
+ .meta_text_element {
1950
+ order: 1;
1951
+ }
1952
+ }
1953
+
1954
+ .upfront-breakdown {
1955
+ display: flex;
1956
+ flex-direction: column;
1957
+ gap: 4px;
1958
+ width: 100%;
1959
+
1960
+ background-color: var(
1961
+ --_ctm-mob-dn-pe-bn-bd-cr,
1962
+ var(--_ctm-tab-dn-pe-bn-bd-cr, var(--_ctm-dn-pe-bn-bd-cr))
1963
+ );
1964
+
1965
+ border-color: var(
1966
+ --_show-border,
1967
+ var(--_ctm-mob-dn-pe-bn-br-cr, var(--_ctm-tab-dn-pe-bn-br-cr, var(--_ctm-dn-pe-bn-br-cr)))
1968
+ );
1969
+ border-style: var(
1970
+ --_show-border,
1971
+ var(--_ctm-mob-dn-pe-bn-br-se, var(--_ctm-tab-dn-pe-bn-br-se, var(--_ctm-dn-pe-bn-br-se)))
1972
+ );
1973
+ border-width: var(
1974
+ --_show-border,
1975
+ var(--_ctm-mob-dn-pe-bn-br-wh, var(--_ctm-tab-dn-pe-bn-br-wh, var(--_ctm-dn-pe-bn-br-wh)))
1976
+ );
1977
+ border-radius: var(
1978
+ --_ctm-mob-dn-pe-bn-br-rs,
1979
+ var(--_ctm-tab-dn-pe-bn-br-rs, var(--_ctm-dn-pe-bn-br-rs))
1980
+ );
1981
+
1982
+ box-shadow: var(
1983
+ --_show-shadow,
1984
+ var(--_ctm-mob-dn-pe-bn-sw-ae, var(--_ctm-tab-dn-pe-bn-sw-ae, var(--_ctm-dn-pe-bn-sw-ae)))
1985
+ var(
1986
+ --_ctm-mob-dn-pe-bn-sw-br,
1987
+ var(--_ctm-tab-dn-pe-bn-sw-br, var(--_ctm-dn-pe-bn-sw-br))
1988
+ )
1989
+ var(
1990
+ --_ctm-mob-dn-pe-bn-sw-sd,
1991
+ var(--_ctm-tab-dn-pe-bn-sw-sd, var(--_ctm-dn-pe-bn-sw-sd))
1992
+ )
1993
+ var(
1994
+ --_ctm-mob-dn-pe-bn-sw-cr,
1995
+ var(--_ctm-tab-dn-pe-bn-sw-cr, var(--_ctm-dn-pe-bn-sw-cr))
1996
+ )
1997
+ );
1998
+
1999
+ padding: var(--_ctm-mob-dn-pe-bn-pg, var(--_ctm-tab-dn-pe-bn-pg, var(--_ctm-dn-pe-bn-pg)));
2000
+ }
2001
+
2002
+ .breakdown-row {
2003
+ display: flex;
2004
+ justify-content: space-between;
2005
+ gap: 12px;
2006
+ }
2007
+
2008
+ .breakdown-label {
2009
+ background-color: var(
2010
+ --_ctm-mob-dn-bn-py-bd-cr,
2011
+ var(--_ctm-tab-dn-bn-py-bd-cr, var(--_ctm-dn-bn-py-bd-cr))
2012
+ );
2013
+ color: var(--_ctm-mob-dn-bn-py-cr, var(--_ctm-tab-dn-bn-py-cr, var(--_ctm-dn-bn-py-cr)));
2014
+ font-family: var(
2015
+ --_ctm-mob-dn-bn-py-ft-fy,
2016
+ var(--_ctm-tab-dn-bn-py-ft-fy, var(--_ctm-dn-bn-py-ft-fy))
2017
+ );
2018
+ font-size: var(
2019
+ --_ctm-mob-dn-bn-py-ft-se,
2020
+ var(--_ctm-tab-dn-bn-py-ft-se, var(--_ctm-dn-bn-py-ft-se))
2021
+ );
2022
+ font-weight: var(
2023
+ --_ctm-mob-dn-bn-py-ft-wt,
2024
+ var(--_ctm-tab-dn-bn-py-ft-wt, var(--_ctm-dn-bn-py-ft-wt))
2025
+ );
2026
+ font-style: var(
2027
+ --_ctm-mob-dn-bn-py-ft-se-ic,
2028
+ var(--_ctm-tab-dn-bn-py-ft-se-ic, var(--_ctm-dn-bn-py-ft-se-ic))
2029
+ );
2030
+ text-align: var(
2031
+ --_ctm-mob-dn-bn-py-tt-an,
2032
+ var(--_ctm-tab-dn-bn-py-tt-an, var(--_ctm-dn-bn-py-tt-an))
2033
+ );
2034
+ letter-spacing: var(
2035
+ --_ctm-mob-dn-bn-py-lr-sg,
2036
+ var(--_ctm-tab-dn-bn-py-lr-sg, var(--_ctm-dn-bn-py-lr-sg))
2037
+ );
2038
+ line-height: var(
2039
+ --_ctm-mob-dn-bn-py-le-ht,
2040
+ var(--_ctm-tab-dn-bn-py-le-ht, var(--_ctm-dn-bn-py-le-ht))
2041
+ );
2042
+ text-decoration: var(
2043
+ --_ctm-mob-dn-bn-py-ue,
2044
+ var(--_ctm-tab-dn-bn-py-ue, var(--_ctm-dn-bn-py-ue))
2045
+ );
2046
+
2047
+ border-color: var(
2048
+ --_show-border,
2049
+ var(--_ctm-mob-dn-bn-py-br-cr, var(--_ctm-tab-dn-bn-py-br-cr, var(--_ctm-dn-bn-py-br-cr)))
2050
+ );
2051
+ border-style: var(
2052
+ --_show-border,
2053
+ var(--_ctm-mob-dn-bn-py-br-se, var(--_ctm-tab-dn-bn-py-br-se, var(--_ctm-dn-bn-py-br-se)))
2054
+ );
2055
+ border-width: var(
2056
+ --_show-border,
2057
+ var(--_ctm-mob-dn-bn-py-br-wh, var(--_ctm-tab-dn-bn-py-br-wh, var(--_ctm-dn-bn-py-br-wh)))
2058
+ );
2059
+ border-radius: var(
2060
+ --_ctm-mob-dn-bn-py-br-rs,
2061
+ var(--_ctm-tab-dn-bn-py-br-rs, var(--_ctm-dn-bn-py-br-rs))
2062
+ );
2063
+
2064
+ box-shadow: var(
2065
+ --_show-shadow,
2066
+ var(--_ctm-mob-dn-bn-py-sw-ae, var(--_ctm-tab-dn-bn-py-sw-ae, var(--_ctm-dn-bn-py-sw-ae)))
2067
+ var(
2068
+ --_ctm-mob-dn-bn-py-sw-br,
2069
+ var(--_ctm-tab-dn-bn-py-sw-br, var(--_ctm-dn-bn-py-sw-br))
2070
+ )
2071
+ var(
2072
+ --_ctm-mob-dn-bn-py-sw-sd,
2073
+ var(--_ctm-tab-dn-bn-py-sw-sd, var(--_ctm-dn-bn-py-sw-sd))
2074
+ )
2075
+ var(
2076
+ --_ctm-mob-dn-bn-py-sw-cr,
2077
+ var(--_ctm-tab-dn-bn-py-sw-cr, var(--_ctm-dn-bn-py-sw-cr))
2078
+ )
2079
+ );
2080
+
2081
+ padding: var(--_ctm-mob-dn-bn-py-pg, var(--_ctm-tab-dn-bn-py-pg, var(--_ctm-dn-bn-py-pg)));
2082
+ }
2083
+
2084
+ .breakdown-value {
2085
+ background-color: var(
2086
+ --_ctm-mob-dn-bn-ve-bd-cr,
2087
+ var(--_ctm-tab-dn-bn-ve-bd-cr, var(--_ctm-dn-bn-ve-bd-cr))
2088
+ );
2089
+ color: var(--_ctm-mob-dn-bn-ve-cr, var(--_ctm-tab-dn-bn-ve-cr, var(--_ctm-dn-bn-ve-cr)));
2090
+ font-family: var(
2091
+ --_ctm-mob-dn-bn-ve-ft-fy,
2092
+ var(--_ctm-tab-dn-bn-ve-ft-fy, var(--_ctm-dn-bn-ve-ft-fy))
2093
+ );
2094
+ font-size: var(
2095
+ --_ctm-mob-dn-bn-ve-ft-se,
2096
+ var(--_ctm-tab-dn-bn-ve-ft-se, var(--_ctm-dn-bn-ve-ft-se))
2097
+ );
2098
+ font-weight: var(
2099
+ --_ctm-mob-dn-bn-ve-ft-wt,
2100
+ var(--_ctm-tab-dn-bn-ve-ft-wt, var(--_ctm-dn-bn-ve-ft-wt))
2101
+ );
2102
+ font-style: var(
2103
+ --_ctm-mob-dn-bn-ve-ft-se-ic,
2104
+ var(--_ctm-tab-dn-bn-ve-ft-se-ic, var(--_ctm-dn-bn-ve-ft-se-ic))
2105
+ );
2106
+ text-align: var(
2107
+ --_ctm-mob-dn-bn-ve-tt-an,
2108
+ var(--_ctm-tab-dn-bn-ve-tt-an, var(--_ctm-dn-bn-ve-tt-an))
2109
+ );
2110
+ letter-spacing: var(
2111
+ --_ctm-mob-dn-bn-ve-lr-sg,
2112
+ var(--_ctm-tab-dn-bn-ve-lr-sg, var(--_ctm-dn-bn-ve-lr-sg))
2113
+ );
2114
+ line-height: var(
2115
+ --_ctm-mob-dn-bn-ve-le-ht,
2116
+ var(--_ctm-tab-dn-bn-ve-le-ht, var(--_ctm-dn-bn-ve-le-ht))
2117
+ );
2118
+ text-decoration: var(
2119
+ --_ctm-mob-dn-bn-ve-ue,
2120
+ var(--_ctm-tab-dn-bn-ve-ue, var(--_ctm-dn-bn-ve-ue))
2121
+ );
2122
+
2123
+ border-color: var(
2124
+ --_show-border,
2125
+ var(--_ctm-mob-dn-bn-ve-br-cr, var(--_ctm-tab-dn-bn-ve-br-cr, var(--_ctm-dn-bn-ve-br-cr)))
2126
+ );
2127
+ border-style: var(
2128
+ --_show-border,
2129
+ var(--_ctm-mob-dn-bn-ve-br-se, var(--_ctm-tab-dn-bn-ve-br-se, var(--_ctm-dn-bn-ve-br-se)))
2130
+ );
2131
+ border-width: var(
2132
+ --_show-border,
2133
+ var(--_ctm-mob-dn-bn-ve-br-wh, var(--_ctm-tab-dn-bn-ve-br-wh, var(--_ctm-dn-bn-ve-br-wh)))
2134
+ );
2135
+ border-radius: var(
2136
+ --_ctm-mob-dn-bn-ve-br-rs,
2137
+ var(--_ctm-tab-dn-bn-ve-br-rs, var(--_ctm-dn-bn-ve-br-rs))
2138
+ );
2139
+
2140
+ box-shadow: var(
2141
+ --_show-shadow,
2142
+ var(--_ctm-mob-dn-bn-ve-sw-ae, var(--_ctm-tab-dn-bn-ve-sw-ae, var(--_ctm-dn-bn-ve-sw-ae)))
2143
+ var(
2144
+ --_ctm-mob-dn-bn-ve-sw-br,
2145
+ var(--_ctm-tab-dn-bn-ve-sw-br, var(--_ctm-dn-bn-ve-sw-br))
2146
+ )
2147
+ var(
2148
+ --_ctm-mob-dn-bn-ve-sw-sd,
2149
+ var(--_ctm-tab-dn-bn-ve-sw-sd, var(--_ctm-dn-bn-ve-sw-sd))
2150
+ )
2151
+ var(
2152
+ --_ctm-mob-dn-bn-ve-sw-cr,
2153
+ var(--_ctm-tab-dn-bn-ve-sw-cr, var(--_ctm-dn-bn-ve-sw-cr))
2154
+ )
2155
+ );
2156
+
2157
+ padding: var(--_ctm-mob-dn-bn-ve-pg, var(--_ctm-tab-dn-bn-ve-pg, var(--_ctm-dn-bn-ve-pg)));
2158
+ }
1984
2159
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
1985
2160
  // row-gap: var(--_sf-gp);
1986
2161
  width: 100%;
@@ -2007,15 +2182,67 @@
2007
2182
  transform: scaleY(-1);
2008
2183
  }
2009
2184
  .meta_text_element {
2010
- color: green;
2011
- //styleName: Text md/Medium;
2012
-
2013
- font-size: 16px;
2014
- font-weight: 500;
2015
- line-height: 24px;
2016
- text-align: left;
2017
- text-underline-position: from-font;
2018
- text-decoration-skip-ink: none;
2185
+ background-color: var(
2186
+ --_ctm-mob-dn-ll-bd-cr,
2187
+ var(--_ctm-tab-dn-ll-bd-cr, var(--_ctm-dn-ll-bd-cr))
2188
+ );
2189
+ color: var(--_ctm-mob-dn-ll-cr, var(--_ctm-tab-dn-ll-cr, var(--_ctm-dn-ll-cr)));
2190
+ font-family: var(
2191
+ --_ctm-mob-dn-ll-ft-fy,
2192
+ var(--_ctm-tab-dn-ll-ft-fy, var(--_ctm-dn-ll-ft-fy))
2193
+ );
2194
+ font-size: var(
2195
+ --_ctm-mob-dn-ll-ft-se,
2196
+ var(--_ctm-tab-dn-ll-ft-se, var(--_ctm-dn-ll-ft-se))
2197
+ );
2198
+ font-weight: var(
2199
+ --_ctm-mob-dn-ll-ft-wt,
2200
+ var(--_ctm-tab-dn-ll-ft-wt, var(--_ctm-dn-ll-ft-wt))
2201
+ );
2202
+ font-style: var(
2203
+ --_ctm-mob-dn-ll-ft-se-ic,
2204
+ var(--_ctm-tab-dn-ll-ft-se-ic, var(--_ctm-dn-ll-ft-se-ic))
2205
+ );
2206
+ text-align: var(
2207
+ --_ctm-mob-dn-ll-tt-an,
2208
+ var(--_ctm-tab-dn-ll-tt-an, var(--_ctm-dn-ll-tt-an))
2209
+ );
2210
+ letter-spacing: var(
2211
+ --_ctm-mob-dn-ll-lr-sg,
2212
+ var(--_ctm-tab-dn-ll-lr-sg, var(--_ctm-dn-ll-lr-sg))
2213
+ );
2214
+ line-height: var(
2215
+ --_ctm-mob-dn-ll-le-ht,
2216
+ var(--_ctm-tab-dn-ll-le-ht, var(--_ctm-dn-ll-le-ht))
2217
+ );
2218
+ text-decoration: var(--_ctm-mob-dn-ll-ue, var(--_ctm-tab-dn-ll-ue, var(--_ctm-dn-ll-ue)));
2219
+
2220
+ border-color: var(
2221
+ --_show-border,
2222
+ var(--_ctm-mob-dn-ll-br-cr, var(--_ctm-tab-dn-ll-br-cr, var(--_ctm-dn-ll-br-cr)))
2223
+ );
2224
+ border-style: var(
2225
+ --_show-border,
2226
+ var(--_ctm-mob-dn-ll-br-se, var(--_ctm-tab-dn-ll-br-se, var(--_ctm-dn-ll-br-se)))
2227
+ );
2228
+ border-width: var(
2229
+ --_show-border,
2230
+ var(--_ctm-mob-dn-ll-br-wh, var(--_ctm-tab-dn-ll-br-wh, var(--_ctm-dn-ll-br-wh)))
2231
+ );
2232
+ border-radius: var(
2233
+ --_ctm-mob-dn-ll-br-rs,
2234
+ var(--_ctm-tab-dn-ll-br-rs, var(--_ctm-dn-ll-br-rs))
2235
+ );
2236
+
2237
+ box-shadow: var(
2238
+ --_show-shadow,
2239
+ var(--_ctm-mob-dn-ll-sw-ae, var(--_ctm-tab-dn-ll-sw-ae, var(--_ctm-dn-ll-sw-ae)))
2240
+ var(--_ctm-mob-dn-ll-sw-br, var(--_ctm-tab-dn-ll-sw-br, var(--_ctm-dn-ll-sw-br)))
2241
+ var(--_ctm-mob-dn-ll-sw-sd, var(--_ctm-tab-dn-ll-sw-sd, var(--_ctm-dn-ll-sw-sd)))
2242
+ var(--_ctm-mob-dn-ll-sw-cr, var(--_ctm-tab-dn-ll-sw-cr, var(--_ctm-dn-ll-sw-cr)))
2243
+ );
2244
+
2245
+ padding: var(--_ctm-mob-dn-ll-pg, var(--_ctm-tab-dn-ll-pg, var(--_ctm-dn-ll-pg)));
2019
2246
  }
2020
2247
  .price-container {
2021
2248
  display: flex;
@@ -2026,7 +2253,7 @@
2026
2253
  align-items: flex-start;
2027
2254
  gap: 10px;
2028
2255
  flex-direction: column;
2029
- width: 100%;
2256
+ // width: 100%;
2030
2257
  }
2031
2258
 
2032
2259
  // Tooltip SCSS Style Starts Here -
@@ -2591,6 +2818,149 @@
2591
2818
  }
2592
2819
  }
2593
2820
  // Tooltip SCSS Style Ends Here -
2821
+
2822
+ // Popover SCSS Style Starts Here -
2823
+ .popover-container {
2824
+ position: relative;
2825
+ display: inline-block;
2826
+
2827
+ .popover-trigger {
2828
+ cursor: pointer;
2829
+ display: inline-flex;
2830
+ align-items: center;
2831
+ }
2832
+
2833
+ .popover-box {
2834
+ position: absolute;
2835
+ z-index: 1000;
2836
+ left: calc(100% + 8px);
2837
+ top: 0;
2838
+ min-width: 180px;
2839
+ display: flex;
2840
+ flex-direction: column;
2841
+ gap: var(
2842
+ --_ctm-mob-dn-pr-se-im-gp,
2843
+ var(--_ctm-tab-dn-pr-se-im-gp, var(--_ctm-dn-pr-se-im-gp))
2844
+ );
2845
+
2846
+ background-color: var(
2847
+ --_ctm-mob-dn-pr-se-bd-cr,
2848
+ var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2849
+ );
2850
+ color: var(
2851
+ --_ctm-mob-dn-pr-se-cr,
2852
+ var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr))
2853
+ );
2854
+ font-family: var(
2855
+ --_ctm-mob-dn-pr-se-ft-fy,
2856
+ var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
2857
+ );
2858
+ font-size: var(
2859
+ --_ctm-mob-dn-pr-se-ft-se,
2860
+ var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
2861
+ );
2862
+ font-weight: var(
2863
+ --_ctm-mob-dn-pr-se-ft-wt,
2864
+ var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
2865
+ );
2866
+ font-style: var(
2867
+ --_ctm-mob-dn-pr-se-ft-se-ic,
2868
+ var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
2869
+ );
2870
+ text-align: var(
2871
+ --_ctm-mob-dn-pr-se-tt-an,
2872
+ var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
2873
+ );
2874
+ letter-spacing: var(
2875
+ --_ctm-mob-dn-pr-se-lr-sg,
2876
+ var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
2877
+ );
2878
+ line-height: var(
2879
+ --_ctm-mob-dn-pr-se-le-ht,
2880
+ var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht))
2881
+ );
2882
+ text-decoration: var(
2883
+ --_ctm-mob-dn-pr-se-ue,
2884
+ var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
2885
+ );
2886
+
2887
+ border-color: var(
2888
+ --_show-border,
2889
+ var(
2890
+ --_ctm-mob-dn-pr-se-br-cr,
2891
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2892
+ )
2893
+ );
2894
+ border-style: var(
2895
+ --_show-border,
2896
+ var(
2897
+ --_ctm-mob-dn-pr-se-br-se,
2898
+ var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
2899
+ )
2900
+ );
2901
+ border-width: var(
2902
+ --_show-border,
2903
+ var(
2904
+ --_ctm-mob-dn-pr-se-br-wh,
2905
+ var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
2906
+ )
2907
+ );
2908
+ border-radius: var(
2909
+ --_ctm-mob-dn-pr-se-br-rs,
2910
+ var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
2911
+ );
2912
+
2913
+ box-shadow: var(
2914
+ --_show-shadow,
2915
+ var(
2916
+ --_ctm-mob-dn-pr-se-sw-ae,
2917
+ var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))
2918
+ )
2919
+ var(
2920
+ --_ctm-mob-dn-pr-se-sw-br,
2921
+ var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
2922
+ )
2923
+ var(
2924
+ --_ctm-mob-dn-pr-se-sw-sd,
2925
+ var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
2926
+ )
2927
+ var(
2928
+ --_ctm-mob-dn-pr-se-sw-cr,
2929
+ var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
2930
+ )
2931
+ );
2932
+
2933
+ padding: var(
2934
+ --_ctm-mob-dn-pr-se-pg,
2935
+ var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg))
2936
+ );
2937
+
2938
+ .breakdown-row {
2939
+ display: flex;
2940
+ justify-content: space-between;
2941
+ gap: 12px;
2942
+ }
2943
+ }
2944
+
2945
+ .popover-arrow {
2946
+ position: absolute;
2947
+ top: 8px;
2948
+ left: -5px;
2949
+ width: 10px;
2950
+ height: 10px;
2951
+ background-color: var(
2952
+ --_ctm-mob-dn-pr-se-bd-cr,
2953
+ var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2954
+ );
2955
+ transform: rotate(-45deg);
2956
+ box-shadow: -1px -1px 0px
2957
+ var(
2958
+ --_ctm-mob-dn-pr-se-br-cr,
2959
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2960
+ );
2961
+ }
2962
+ }
2963
+ // Popover SCSS Style Ends Here -
2594
2964
  }
2595
2965
  }
2596
2966
  }