@sc-360-v2/storefront-cms-library 0.4.45 → 0.4.49

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 (18) hide show
  1. package/dist/add-order.scss +4 -0
  2. package/dist/add-products-tab.scss +847 -0
  3. package/dist/allocations.scss +217 -218
  4. package/dist/builder.js +1 -1
  5. package/dist/bulk-variant-picker.scss +511 -309
  6. package/dist/cart-details.scss +885 -59
  7. package/dist/cart-summary.scss +38 -38
  8. package/dist/cartAttributes.scss +37 -5
  9. package/dist/cartDropdownOverlay.scss +7 -0
  10. package/dist/dropdownTemplate.scss +41 -3
  11. package/dist/language-selector.scss +0 -30
  12. package/dist/product-highlights.scss +7 -1
  13. package/dist/profile.scss +2 -2
  14. package/dist/static-global.scss +31 -0
  15. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +215 -0
  16. package/dist/types/builder/tools/element-edit/bulkVariantPicker.d.ts +1 -1
  17. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +66 -0
  18. package/package.json +1 -1
package/dist/cart-details.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
3
4
 
4
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
5
6
  $resizeActive: '[data-cms-element-resizer="true"]';
@@ -193,6 +194,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
193
194
  }
194
195
  span {
195
196
  display: flex;
197
+ transition: transform 0.4s ease-in-out;
198
+ &.rotate__180 {
199
+ transform: rotate(180deg);
200
+ }
201
+ &.rotate__0 {
202
+ transform: rotate(0deg);
203
+ }
196
204
  }
197
205
  &:has(span) {
198
206
  gap: 4px;
@@ -202,6 +210,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
202
210
  }
203
211
  }
204
212
  }
213
+ @media (max-width: 677px) {
214
+ .cart_details_wrapper {
215
+ width: 100%;
216
+ }
217
+ }
205
218
  }
206
219
  }
207
220
 
@@ -216,14 +229,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
216
229
  .form-group {
217
230
  display: flex;
218
231
  flex-direction: column;
219
- gap: 8px;
232
+ gap: 6px;
220
233
 
221
- label {
222
- display: block;
223
- font-size: 0.875rem;
224
- font-weight: 500;
225
- color: #374151;
226
- }
234
+ // label {
235
+ // display: block;
236
+ // font-size: 0.875rem;
237
+ // font-weight: 500;
238
+ // color: #374151;
239
+ // }
227
240
 
228
241
  .primary_text_label {
229
242
  font-weight: 700;
@@ -234,8 +247,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
234
247
  width: 100%;
235
248
  padding: 0.5rem 0.75rem;
236
249
  font-size: 0.875rem;
237
- border: 1px solid #d1d5db;
238
- border-radius: 0.375rem;
250
+ border: 1px solid var(--_thm-cs-be-se-3);
251
+ border-radius: 4px;
239
252
  outline: none;
240
253
  box-sizing: border-box;
241
254
  transition: all 0.2s;
@@ -265,10 +278,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
265
278
  width: fit-content;
266
279
 
267
280
  span {
268
- color: var(--_gray-500);
281
+ color: var(--_thm-ty-p2-tt-cr);
269
282
 
270
283
  span {
271
- color: var(--_gray-900);
284
+ color: var(--_thm-ty-p1-tt-cr);
272
285
  font-weight: 500;
273
286
  }
274
287
  }
@@ -367,9 +380,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
367
380
  justify-content: center;
368
381
 
369
382
  input[type="checkbox"] {
370
- width: 20px;
371
- height: 20px;
372
- border: 1px solid #d0d5dd;
383
+ width: 16px;
384
+ height: 16px;
385
+ border: 1px solid var(--_thm-cs-be-se-3);
373
386
  border-radius: 4px;
374
387
  position: relative;
375
388
  background-color: #fff;
@@ -399,7 +412,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
399
412
  white-space: nowrap;
400
413
  align-self: stretch;
401
414
  align-items: flex-start;
402
- margin-left: 130px;
415
+ // margin-left: 130px;
403
416
 
404
417
  .delete-icon-container {
405
418
  display: flex;
@@ -471,7 +484,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
471
484
  }
472
485
 
473
486
  .border_dashed {
474
- border: 1px dashed var(--_gray-300);
487
+ border: 1px dashed var(--_thm-cs-be-se-3);
475
488
  }
476
489
 
477
490
  .cart_products_wrapper,
@@ -503,10 +516,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
503
516
  display: flex;
504
517
  flex-direction: column;
505
518
  gap: 6px;
506
- border: 1px solid var(--_gray-100);
519
+ border: 1px solid var(--_thm-cs-be-se-3);
507
520
  border-radius: 4px;
508
521
  padding: 10px;
509
- border: 1px solid var(--_gray-200);
522
+ border: 1px solid var(--_thm-cs-be-se-3);
510
523
  background-color: var(--_base-white);
511
524
  border-radius: 4px;
512
525
  .label {
@@ -525,7 +538,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
525
538
  input {
526
539
  background-color: var(--_base-white);
527
540
  padding: 8px 12px;
528
- border: 1px solid var(--_gray-300);
541
+ border: 1px solid var(--_thm-cs-be-se-3);
529
542
  border-radius: 4px;
530
543
  transition:
531
544
  background-color 0.2s,
@@ -589,7 +602,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
589
602
 
590
603
  input {
591
604
  border: none;
592
- border: 1px solid var(--_gray-300);
605
+ border: 1px solid var(--_thm-cs-be-se-3);
593
606
  padding: 8px;
594
607
  outline: none;
595
608
  text-align: center;
@@ -632,7 +645,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
632
645
  .attribute_form_field {
633
646
  background-color: var(--_base-white);
634
647
  padding: 8px 12px;
635
- border: 1px solid var(--_gray-300);
648
+ border: 1px solid var(--_thm-cs-be-se-3);
636
649
  border-radius: 4px;
637
650
  height: 40px;
638
651
  }
@@ -758,7 +771,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
758
771
  padding: 16px;
759
772
  gap: 12px;
760
773
  background-color: var(--_base-white);
761
- border: 1px solid var(--_gray-300);
774
+ border: 1px solid var(--_thm-cs-be-se-3);
762
775
  border-radius: 4px;
763
776
  .clear_upload_icon {
764
777
  // display: none;
@@ -1006,7 +1019,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1006
1019
  border-radius: 4px;
1007
1020
  background-repeat: no-repeat;
1008
1021
  background-position: center;
1009
- border: 1px solid var(--_gray-200);
1022
+ border: 1px solid var(--_thm-cs-be-se-3);
1010
1023
  }
1011
1024
 
1012
1025
  .product_info_wrapper {
@@ -1018,6 +1031,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1018
1031
  align-self: stretch;
1019
1032
  margin-right: 16px;
1020
1033
 
1034
+ @media (min-width: 767px) and (max-width: 1023px) {
1035
+ width: 280px;
1036
+ }
1037
+
1021
1038
  .product_info_container {
1022
1039
  display: flex;
1023
1040
  flex-direction: column;
@@ -1365,16 +1382,21 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1365
1382
  flex-direction: column;
1366
1383
  align-items: flex-start;
1367
1384
  gap: 6px;
1368
- width: 113px;
1385
+ // width: 113px;
1369
1386
 
1370
1387
  .product_qty_container {
1371
1388
  display: flex;
1372
1389
  align-items: flex-start;
1373
1390
  align-self: stretch;
1374
1391
  border-radius: 4px;
1375
- border: 0.5px solid #d0d5dd;
1392
+ border: 0.5px solid var(--_thm-cs-be-se-3);
1376
1393
  background: #fff;
1377
1394
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
1395
+ margin-top: 2px;
1396
+ &:focus-within {
1397
+ outline: 2px solid var(--_gray-100);
1398
+ border: 1px solid var(--_gray-300);
1399
+ }
1378
1400
 
1379
1401
  .product_qty_label {
1380
1402
  display: flex;
@@ -1382,10 +1404,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1382
1404
  align-items: center;
1383
1405
  border-radius: 8px 0px 0px 8px;
1384
1406
  p {
1385
- color: #475467;
1386
- font-size: 16px;
1387
- font-weight: 400;
1388
- line-height: 24px;
1407
+ color: var(--_thm-ty-p1-tt-cr);
1408
+ font-size: var(--_thm-ty-p1-ft-se);
1409
+ font-weight: var(--_thm-ty-p1-bd);
1410
+ // line-height: 24px;
1411
+ line-height: var(--_thm-ty-p1-le-ht);
1389
1412
  }
1390
1413
  }
1391
1414
  .product_qty_input_container {
@@ -1395,7 +1418,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1395
1418
  width: 55px;
1396
1419
  border-radius: 0px 4px 4px 0px;
1397
1420
  background: #fff;
1398
- border-left: 1px solid #d0d5dd;
1421
+ border-left: 1px solid var(--_thm-cs-be-se-3);
1399
1422
  padding: 8px 12px;
1400
1423
  .svg_icon {
1401
1424
  position: absolute;
@@ -1414,12 +1437,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1414
1437
  // display: flex;
1415
1438
  // padding: 8px 12px;
1416
1439
  align-items: center;
1440
+ color: var(--_thm-ty-p2-tt-cr);
1441
+ font-size: var(--_thm-ty-p1-ft-se);
1442
+ font-weight: var(--_thm-ty-p1-bd);
1443
+ line-height: var(--_thm-ty-p1-le-ht);
1417
1444
  // gap: 8px;
1418
1445
  // flex: 1 0 0;
1419
1446
  // align-self: stretch;
1420
1447
  // border-radius: 0px 4px 4px 0px;
1421
1448
  // background: #fff;
1422
- // border-left: 1px solid #d0d5dd;
1449
+ // border-left: 1px solid var(--_thm-cs-be-se-3);
1423
1450
  // max-width: 80px;
1424
1451
  text-align: center;
1425
1452
  width: 75%;
@@ -1499,8 +1526,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1499
1526
  }
1500
1527
  & > a,
1501
1528
  & > span {
1502
- width: 24px;
1503
- height: 24px;
1529
+ width: 32px;
1530
+ height: 32px;
1504
1531
  border-radius: 4px;
1505
1532
 
1506
1533
  &:hover {
@@ -1517,35 +1544,49 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1517
1544
  cursor: pointer;
1518
1545
  svg {
1519
1546
  width: var(
1520
- --_ctm-mob-dn-pt-an-pt-an-et-in-se,
1521
- var(--_ctm-tab-dn-pt-an-pt-an-et-in-se, var(--_ctm-dn-pt-an-pt-an-et-in-se))
1547
+ --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se,
1548
+ var(
1549
+ --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se,
1550
+ var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se)
1551
+ )
1522
1552
  );
1523
1553
  height: var(
1524
- --_ctm-mob-dn-pt-an-pt-an-et-in-se,
1525
- var(--_ctm-tab-dn-pt-an-pt-an-et-in-se, var(--_ctm-dn-pt-an-pt-an-et-in-se))
1554
+ --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se,
1555
+ var(
1556
+ --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se,
1557
+ var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se)
1558
+ )
1526
1559
  );
1527
1560
  path {
1528
- stroke: var(
1529
- --_ctm-mob-dn-pt-an-pt-an-et-in-c1,
1530
- var(--_ctm-tab-dn-pt-an-pt-an-et-in-c1, var(--_ctm-dn-pt-an-pt-an-et-in-c1))
1531
- );
1561
+ // stroke: var(
1562
+ // --_ctm-mob-dn-pt-an-pt-an-et-in-c1,
1563
+ // var(--_ctm-tab-dn-pt-an-pt-an-et-in-c1, var(--_ctm-dn-pt-an-pt-an-et-in-c1))
1564
+ // );
1565
+ stroke: var(--_thm-cs-be-se-1);
1532
1566
  }
1533
1567
  }
1534
1568
  &:hover {
1535
1569
  svg {
1536
1570
  width: var(
1537
- --_ctm-mob-dn-pt-an-pt-an-et-in-se,
1538
- var(--_ctm-tab-dn-pt-an-pt-an-et-in-se, var(--_ctm-dn-pt-an-pt-an-et-in-se))
1571
+ --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se,
1572
+ var(
1573
+ --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se,
1574
+ var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se)
1575
+ )
1539
1576
  );
1540
1577
  height: var(
1541
- --_ctm-mob-dn-pt-an-pt-an-et-in-se,
1542
- var(--_ctm-tab-dn-pt-an-pt-an-et-in-se, var(--_ctm-dn-pt-an-pt-an-et-in-se))
1578
+ --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se,
1579
+ var(
1580
+ --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se,
1581
+ var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se)
1582
+ )
1543
1583
  );
1544
1584
  path {
1545
- stroke: var(
1546
- --_ctm-mob-dn-pt-an-pt-an-et-in-c1,
1547
- var(--_ctm-tab-dn-pt-an-pt-an-et-in-c1, var(--_ctm-dn-pt-an-pt-an-et-in-c1))
1548
- );
1585
+ stroke: var(--_thm-cs-at-py);
1586
+ // stroke: var(
1587
+ // --_ctm-mob-dn-pt-an-pt-an-et-in-c1,
1588
+ // var(--_ctm-tab-dn-pt-an-pt-an-et-in-c1, var(--_ctm-dn-pt-an-pt-an-et-in-c1))
1589
+ // );
1549
1590
  }
1550
1591
  }
1551
1592
  }
@@ -1562,10 +1603,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1562
1603
  var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
1563
1604
  );
1564
1605
  path {
1565
- stroke: var(
1566
- --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
1567
- var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
1568
- );
1606
+ // stroke: var(
1607
+ // --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
1608
+ // var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
1609
+ // );
1610
+ stroke: var(--_thm-cs-be-se-1);
1569
1611
  }
1570
1612
  }
1571
1613
  &:hover {
@@ -1579,10 +1621,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1579
1621
  var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
1580
1622
  );
1581
1623
  path {
1582
- stroke: var(
1583
- --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
1584
- var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
1585
- );
1624
+ // stroke: var(
1625
+ // --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
1626
+ // var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
1627
+ // );
1628
+ stroke: var(--_thm-cs-at-py);
1586
1629
  }
1587
1630
  }
1588
1631
  }
@@ -2006,7 +2049,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2006
2049
  // align-items: flex-start;
2007
2050
  // align-self: stretch;
2008
2051
  // border-radius: 4px;
2009
- // border: 0.5px solid #d0d5dd;
2052
+ // border: 0.5px solid var(--_thm-cs-be-se-3);
2010
2053
  // background: #fff;
2011
2054
  // box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
2012
2055
 
@@ -2032,7 +2075,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2032
2075
  // align-self: stretch;
2033
2076
  // border-radius: 0px 4px 4px 0px;
2034
2077
  // background: #fff;
2035
- // border-left: 1px solid #d0d5dd;
2078
+ // border-left: 1px solid var(--_thm-cs-be-se-3);
2036
2079
  // max-width: 80px;
2037
2080
  // }
2038
2081
  // }
@@ -2138,6 +2181,783 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2138
2181
  // }
2139
2182
  }
2140
2183
 
2184
+ // Responsive for Mobile
2185
+ @media (max-width: 767px) {
2186
+ .cart_item_wrapper {
2187
+ .cart-item-attr-grid {
2188
+ grid-template-columns: 1fr;
2189
+ margin-top: 0px;
2190
+ }
2191
+ .cart_product_responsive_wrapper {
2192
+ display: flex;
2193
+ flex-direction: column;
2194
+ gap: 16px;
2195
+ .cart_product_top_section_wrapper {
2196
+ display: flex;
2197
+ align-items: flex-start;
2198
+ gap: 16px;
2199
+ .product_info_wrapper {
2200
+ .product_info_container {
2201
+ display: flex;
2202
+ flex-direction: column;
2203
+ gap: 2px;
2204
+ .product_title {
2205
+ text-overflow: ellipsis;
2206
+ line-height: 125%;
2207
+ margin-bottom: 4px;
2208
+
2209
+ color: var(
2210
+ --_ctm-mob-dn-pt-ne-ss-cr,
2211
+ var(--_ctm-tab-dn-pt-ne-ss-cr, var(--_ctm-dn-pt-ne-ss-cr))
2212
+ );
2213
+ font-family: var(
2214
+ --_sf-hr-ff,
2215
+ var(
2216
+ --_ctm-mob-dn-pt-ne-ss-ft-fy,
2217
+ var(--_ctm-tab-dn-pt-ne-ss-ft-fy, var(--_ctm-dn-pt-ne-ss-ft-fy))
2218
+ )
2219
+ );
2220
+ font-size: var(
2221
+ --_ctm-mob-dn-pt-ne-ss-ft-se,
2222
+ var(--_ctm-tab-dn-pt-ne-ss-ft-se, var(--_ctm-dn-pt-ne-ss-ft-se))
2223
+ );
2224
+ font-weight: var(
2225
+ --_ctm-mob-dn-pt-ne-ss-ft-wt,
2226
+ var(--_ctm-tab-dn-pt-ne-ss-ft-wt, var(--_ctm-dn-pt-ne-ss-ft-wt))
2227
+ );
2228
+ font-style: var(
2229
+ --_ctm-mob-dn-pt-ne-ss-ft-se-ic,
2230
+ var(--_ctm-tab-dn-pt-ne-ss-ft-se-ic, var(--_ctm-dn-pt-ne-ss-ft-se-ic))
2231
+ );
2232
+ text-align: var(
2233
+ --_ctm-mob-dn-pt-ne-ss-tt-an,
2234
+ var(--_ctm-tab-dn-pt-ne-ss-tt-an, var(--_ctm-dn-pt-ne-ss-tt-an))
2235
+ );
2236
+
2237
+ text-decoration: var(
2238
+ --_ctm-mob-dn-pt-ne-ss-ue,
2239
+ var(--_ctm-tab-dn-pt-ne-ss-ue, var(--_ctm-dn-pt-ne-ss-ue))
2240
+ );
2241
+ }
2242
+
2243
+ .product_code {
2244
+ display: flex;
2245
+ align-items: center;
2246
+ align-self: stretch;
2247
+ flex-wrap: wrap;
2248
+ font-size: 14px;
2249
+
2250
+ span {
2251
+ // color: var(--_gray-600);
2252
+ color: var(
2253
+ --_ctm-mob-dn-pt-in-ss-cr,
2254
+ var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr))
2255
+ );
2256
+ font-family: var(
2257
+ --_sf-hr-ff,
2258
+ var(
2259
+ --_ctm-mob-dn-pt-in-ss-ft-fy,
2260
+ var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy))
2261
+ )
2262
+ );
2263
+ // font-size: var(
2264
+ // --_ctm-mob-dn-pt-in-ss-ft-se,
2265
+ // var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se))
2266
+ // );
2267
+ font-weight: var(
2268
+ --_ctm-mob-dn-pt-in-ss-ft-wt,
2269
+ var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt))
2270
+ );
2271
+ font-style: var(
2272
+ --_ctm-mob-dn-pt-in-ss-ft-se-ic,
2273
+ var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic))
2274
+ );
2275
+ text-align: var(
2276
+ --_ctm-mob-dn-pt-in-ss-tt-an,
2277
+ var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an))
2278
+ );
2279
+ letter-spacing: var(
2280
+ --_ctm-mob-dn-pt-in-ss-lr-sg,
2281
+ var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg))
2282
+ );
2283
+ line-height: var(
2284
+ --_ctm-mob-dn-pt-in-ss-le-ht,
2285
+ var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht))
2286
+ );
2287
+ text-decoration: var(
2288
+ --_ctm-mob-dn-pt-in-ss-ue,
2289
+ var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
2290
+ );
2291
+ &:not(:last-child)::after {
2292
+ content: "";
2293
+ display: inline-block;
2294
+ height: 10px;
2295
+ margin-inline: 12px;
2296
+ width: 1px;
2297
+ background-color: var(--_gray-400);
2298
+ }
2299
+
2300
+ &:last-of-type::after {
2301
+ border-right: 0;
2302
+ }
2303
+ }
2304
+ }
2305
+
2306
+ .product_options {
2307
+ display: flex;
2308
+ align-items: center;
2309
+ gap: 4px;
2310
+ align-self: stretch;
2311
+ flex-wrap: wrap;
2312
+ font-size: 14px;
2313
+ span {
2314
+ white-space: nowrap;
2315
+ color: var(
2316
+ --_ctm-mob-dn-pt-in-ss-cr,
2317
+ var(--_ctm-tab-dn-pt-in-ss-cr, var(--_ctm-dn-pt-in-ss-cr))
2318
+ );
2319
+ font-family: var(
2320
+ --_sf-hr-ff,
2321
+ var(
2322
+ --_ctm-mob-dn-pt-in-ss-ft-fy,
2323
+ var(--_ctm-tab-dn-pt-in-ss-ft-fy, var(--_ctm-dn-pt-in-ss-ft-fy))
2324
+ )
2325
+ );
2326
+ // font-size: var(
2327
+ // --_ctm-mob-dn-pt-in-ss-ft-se,
2328
+ // var(--_ctm-tab-dn-pt-in-ss-ft-se, var(--_ctm-dn-pt-in-ss-ft-se))
2329
+ // );
2330
+ font-weight: var(
2331
+ --_ctm-mob-dn-pt-in-ss-ft-wt,
2332
+ var(--_ctm-tab-dn-pt-in-ss-ft-wt, var(--_ctm-dn-pt-in-ss-ft-wt))
2333
+ );
2334
+ font-style: var(
2335
+ --_ctm-mob-dn-pt-in-ss-ft-se-ic,
2336
+ var(--_ctm-tab-dn-pt-in-ss-ft-se-ic, var(--_ctm-dn-pt-in-ss-ft-se-ic))
2337
+ );
2338
+ text-align: var(
2339
+ --_ctm-mob-dn-pt-in-ss-tt-an,
2340
+ var(--_ctm-tab-dn-pt-in-ss-tt-an, var(--_ctm-dn-pt-in-ss-tt-an))
2341
+ );
2342
+ letter-spacing: var(
2343
+ --_ctm-mob-dn-pt-in-ss-lr-sg,
2344
+ var(--_ctm-tab-dn-pt-in-ss-lr-sg, var(--_ctm-dn-pt-in-ss-lr-sg))
2345
+ );
2346
+ line-height: var(
2347
+ --_ctm-mob-dn-pt-in-ss-le-ht,
2348
+ var(--_ctm-tab-dn-pt-in-ss-le-ht, var(--_ctm-dn-pt-in-ss-le-ht))
2349
+ );
2350
+ text-decoration: var(
2351
+ --_ctm-mob-dn-pt-in-ss-ue,
2352
+ var(--_ctm-tab-dn-pt-in-ss-ue, var(--_ctm-dn-pt-in-ss-ue))
2353
+ );
2354
+ &::after {
2355
+ content: "/";
2356
+ padding-left: 4px;
2357
+ }
2358
+ &:last-of-type::after {
2359
+ content: "";
2360
+ }
2361
+ }
2362
+ }
2363
+ }
2364
+ }
2365
+ .cart_product_info_wrapper {
2366
+ display: flex;
2367
+ flex-direction: column;
2368
+ gap: 16px;
2369
+ .product_details_wrapper {
2370
+ display: flex;
2371
+ gap: 16px;
2372
+ }
2373
+ .product_qty_price_wrapper {
2374
+ display: flex;
2375
+ justify-content: space-between;
2376
+ align-items: center;
2377
+ align-self: stretch;
2378
+
2379
+ .product_qty_wrapper {
2380
+ display: flex;
2381
+ // width: 124px;
2382
+ flex-direction: column;
2383
+ align-items: flex-start;
2384
+ gap: 6px;
2385
+ width: 113px;
2386
+
2387
+ .product_qty_container {
2388
+ display: flex;
2389
+ align-items: flex-start;
2390
+ align-self: stretch;
2391
+ border-radius: 4px;
2392
+ border: 0.5px solid var(--_thm-cs-be-se-3);
2393
+ background: #fff;
2394
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
2395
+
2396
+ .product_qty_label {
2397
+ display: flex;
2398
+ padding: 8px 12px;
2399
+ align-items: center;
2400
+ border-radius: 8px 0px 0px 8px;
2401
+ height: 40px;
2402
+ p {
2403
+ color: var(--_thm-ty-p1-tt-cr);
2404
+ font-size: var(--_thm-ty-p1-ft-se);
2405
+ font-weight: var(--_thm-ty-p1-bd);
2406
+ // line-height: 24px;
2407
+ line-height: var(--_thm-ty-p1-le-ht);
2408
+ }
2409
+ }
2410
+ .product_qty_input_container {
2411
+ height: 40px;
2412
+ display: flex;
2413
+ position: relative;
2414
+ width: 55px;
2415
+ border-radius: 0px 4px 4px 0px;
2416
+ background: #fff;
2417
+ border-left: 1px solid var(--_thm-cs-be-se-3);
2418
+ padding: 8px 12px;
2419
+ .svg_icon {
2420
+ position: absolute;
2421
+ top: 8px;
2422
+ right: 0px;
2423
+ g {
2424
+ rect {
2425
+ fill: var(--_gray-500);
2426
+ width: 10px;
2427
+ height: 10px;
2428
+ }
2429
+ }
2430
+ }
2431
+ }
2432
+ .product_qty_number {
2433
+ // display: flex;
2434
+ // padding: 8px 12px;
2435
+ align-items: center;
2436
+ color: var(--_thm-ty-p2-tt-cr);
2437
+ font-size: var(--_thm-ty-p1-ft-se);
2438
+ font-weight: var(--_thm-ty-p1-bd);
2439
+ line-height: var(--_thm-ty-p1-le-ht);
2440
+ // gap: 8px;
2441
+ // flex: 1 0 0;
2442
+ // align-self: stretch;
2443
+ // border-radius: 0px 4px 4px 0px;
2444
+ // background: #fff;
2445
+ // border-left: 1px solid var(--_thm-cs-be-se-3);
2446
+ // max-width: 80px;
2447
+ text-align: center;
2448
+ width: 75%;
2449
+ &::-webkit-outer-spin-button,
2450
+ &::-webkit-inner-spin-button {
2451
+ -webkit-appearance: none;
2452
+ margin: 0;
2453
+ }
2454
+ }
2455
+ }
2456
+ }
2457
+
2458
+ .product_price {
2459
+ // color: var(--_gray-900);
2460
+ // text-align: right;
2461
+ // font-size: 20px;
2462
+ // font-weight: 700;
2463
+ // line-height: 30px;
2464
+ // white-space: nowrap;
2465
+ // min-width: 80px;
2466
+ white-space: nowrap;
2467
+ color: var(
2468
+ --_ctm-mob-dn-pt-pe-ss-cr,
2469
+ var(--_ctm-tab-dn-pt-pe-ss-cr, var(--_ctm-dn-pt-pe-ss-cr))
2470
+ );
2471
+ font-family: var(
2472
+ --_sf-hr-ff,
2473
+ var(
2474
+ --_ctm-mob-dn-pt-pe-ss-ft-fy,
2475
+ var(--_ctm-tab-dn-pt-pe-ss-ft-fy, var(--_ctm-dn-pt-pe-ss-ft-fy))
2476
+ )
2477
+ );
2478
+ font-size: var(
2479
+ --_ctm-mob-dn-pt-pe-ss-ft-se,
2480
+ var(--_ctm-tab-dn-pt-pe-ss-ft-se, var(--_ctm-dn-pt-pe-ss-ft-se))
2481
+ );
2482
+ font-weight: var(
2483
+ --_ctm-mob-dn-pt-pe-ss-ft-wt,
2484
+ var(--_ctm-tab-dn-pt-pe-ss-ft-wt, var(--_ctm-dn-pt-pe-ss-ft-wt))
2485
+ );
2486
+ font-style: var(
2487
+ --_ctm-mob-dn-pt-pe-ss-ft-se-ic,
2488
+ var(--_ctm-tab-dn-pt-pe-ss-ft-se-ic, var(--_ctm-dn-pt-pe-ss-ft-se-ic))
2489
+ );
2490
+ text-align: right;
2491
+ letter-spacing: var(
2492
+ --_ctm-mob-dn-pt-pe-ss-lr-sg,
2493
+ var(--_ctm-tab-dn-pt-pe-ss-lr-sg, var(--_ctm-dn-pt-pe-ss-lr-sg))
2494
+ );
2495
+ line-height: var(
2496
+ --_ctm-mob-dn-pt-pe-ss-le-ht,
2497
+ var(--_ctm-tab-dn-pt-pe-ss-le-ht, var(--_ctm-dn-pt-pe-ss-le-ht))
2498
+ );
2499
+ text-decoration: var(
2500
+ --_ctm-mob-dn-pt-pe-ss-ue,
2501
+ var(--_ctm-tab-dn-pt-pe-ss-ue, var(--_ctm-dn-pt-pe-ss-ue))
2502
+ );
2503
+ min-width: 80px;
2504
+ }
2505
+ }
2506
+ .product_customization_container {
2507
+ display: flex;
2508
+ justify-content: space-between;
2509
+ align-items: center;
2510
+ padding-top: 16px;
2511
+ border-top: 1px solid var(--_thm-cs-be-se-3);
2512
+ .product_customization_left_container {
2513
+ display: flex;
2514
+ align-items: center;
2515
+ gap: 16px;
2516
+ min-height: 28px;
2517
+ .wishlist_icon {
2518
+ cursor: pointer;
2519
+ svg {
2520
+ padding: 4px;
2521
+ border-radius: 4px;
2522
+ width: var(
2523
+ --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
2524
+ var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
2525
+ );
2526
+ height: var(
2527
+ --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
2528
+ var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
2529
+ );
2530
+ path {
2531
+ // stroke: var(
2532
+ // --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
2533
+ // var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
2534
+ // );
2535
+ stroke: var(--_thm-cs-be-se-1);
2536
+ }
2537
+ }
2538
+ &:hover {
2539
+ svg {
2540
+ background-color: color-mix(in srgb, var(--_thm-cs-at-py) 10%, transparent);
2541
+ width: var(
2542
+ --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
2543
+ var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
2544
+ );
2545
+ height: var(
2546
+ --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
2547
+ var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
2548
+ );
2549
+ path {
2550
+ // stroke: var(
2551
+ // --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
2552
+ // var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
2553
+ // );
2554
+ stroke: var(--_thm-cs-at-py);
2555
+ }
2556
+ }
2557
+ }
2558
+ }
2559
+ .svg_icon {
2560
+ display: flex;
2561
+ // svg path {
2562
+ // stroke: var(--_primary-400);
2563
+ // }
2564
+ }
2565
+
2566
+ .customization_button {
2567
+ display: flex;
2568
+ justify-content: center;
2569
+ align-items: center;
2570
+ gap: 4px;
2571
+ white-space: nowrap;
2572
+ // color: var(
2573
+ // --_ctm-mob-dn-pt-as-ss-cr,
2574
+ // var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr))
2575
+ // );
2576
+ color: var(--_thm-cs-tt-ls-as);
2577
+ font-family: var(
2578
+ --_sf-hr-ff,
2579
+ var(
2580
+ --_ctm-mob-dn-pt-as-ss-ft-fy,
2581
+ var(--_ctm-tab-dn-pt-as-ss-ft-fy, var(--_ctm-dn-pt-as-ss-ft-fy))
2582
+ )
2583
+ );
2584
+ font-size: var(
2585
+ --_ctm-mob-dn-pt-as-ss-ft-se,
2586
+ var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se))
2587
+ );
2588
+ font-weight: var(
2589
+ --_ctm-mob-dn-pt-as-ss-ft-wt,
2590
+ var(--_ctm-tab-dn-pt-as-ss-ft-wt, var(--_ctm-dn-pt-as-ss-ft-wt))
2591
+ );
2592
+ font-style: var(
2593
+ --_ctm-mob-dn-pt-as-ss-ft-se-ic,
2594
+ var(--_ctm-tab-dn-pt-as-ss-ft-se-ic, var(--_ctm-dn-pt-as-ss-ft-se-ic))
2595
+ );
2596
+ text-align: var(
2597
+ --_ctm-mob-dn-pt-as-ss-tt-an,
2598
+ var(--_ctm-tab-dn-pt-as-ss-tt-an, var(--_ctm-dn-pt-as-ss-tt-an))
2599
+ );
2600
+ letter-spacing: var(
2601
+ --_ctm-mob-dn-pt-as-ss-lr-sg,
2602
+ var(--_ctm-tab-dn-pt-as-ss-lr-sg, var(--_ctm-dn-pt-as-ss-lr-sg))
2603
+ );
2604
+ line-height: var(
2605
+ --_ctm-mob-dn-pt-as-ss-le-ht,
2606
+ var(--_ctm-tab-dn-pt-as-ss-le-ht, var(--_ctm-dn-pt-as-ss-le-ht))
2607
+ );
2608
+ text-decoration: var(
2609
+ --_ctm-mob-dn-pt-as-ss-ue,
2610
+ var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue))
2611
+ );
2612
+ .attr_val_info_detail {
2613
+ b {
2614
+ margin-right: 4px;
2615
+ }
2616
+ }
2617
+ .svg_icon {
2618
+ display: flex;
2619
+ transition: all 400ms linear;
2620
+ svg {
2621
+ path {
2622
+ // stroke: var(
2623
+ // --_ctm-mob-dn-pt-as-ss-cr,
2624
+ // var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr))
2625
+ // );
2626
+ stroke: var(--_thm-cs-tt-ls-as);
2627
+ }
2628
+ width: 18px;
2629
+ height: 18px;
2630
+ // margin-top: 2px;
2631
+ transition: transform 400ms linear;
2632
+ }
2633
+ }
2634
+ }
2635
+ .attributes_validation_info_sec {
2636
+ display: flex;
2637
+ justify-content: center;
2638
+ align-items: center;
2639
+ gap: 4px;
2640
+ white-space: nowrap;
2641
+ b {
2642
+ margin-right: 4px;
2643
+ }
2644
+ }
2645
+ .svg_icon svg {
2646
+ vertical-align: middle;
2647
+ }
2648
+ .svg_icon.down svg {
2649
+ transform: rotate(180deg);
2650
+ transition: transform 400ms linear;
2651
+ // width: 20px;
2652
+ // height: 20px;
2653
+ }
2654
+ .customizationInfo_button {
2655
+ display: flex;
2656
+ justify-content: center;
2657
+ align-items: center;
2658
+ gap: 8px;
2659
+ white-space: nowrap;
2660
+ color: var(
2661
+ --_ctm-mob-dn-pt-rd-io-cr,
2662
+ var(--_ctm-tab-dn-pt-rd-io-cr, var(--_ctm-dn-pt-rd-io-cr))
2663
+ );
2664
+ font-family: var(
2665
+ --_sf-hr-ff,
2666
+ var(
2667
+ --_ctm-mob-dn-pt-rd-io-ft-fy,
2668
+ var(--_ctm-tab-dn-pt-rd-io-ft-fy, var(--_ctm-dn-pt-rd-io-ft-fy))
2669
+ )
2670
+ );
2671
+ font-size: var(
2672
+ --_ctm-mob-dn-pt-rd-io-ft-se,
2673
+ var(--_ctm-tab-dn-pt-rd-io-ft-se, var(--_ctm-dn-pt-rd-io-ft-se))
2674
+ );
2675
+ font-weight: var(
2676
+ --_ctm-mob-dn-pt-rd-io-ft-wt,
2677
+ var(--_ctm-tab-dn-pt-rd-io-ft-wt, var(--_ctm-dn-pt-rd-io-ft-wt))
2678
+ );
2679
+ font-style: var(
2680
+ --_ctm-mob-dn-pt-rd-io-ft-se-ic,
2681
+ var(--_ctm-tab-dn-pt-rd-io-ft-se-ic, var(--_ctm-dn-pt-rd-io-ft-se-ic))
2682
+ );
2683
+ text-align: var(
2684
+ --_ctm-mob-dn-pt-rd-io-tt-an,
2685
+ var(--_ctm-tab-dn-pt-rd-io-tt-an, var(--_ctm-dn-pt-rd-io-tt-an))
2686
+ );
2687
+ letter-spacing: var(
2688
+ --_ctm-mob-dn-pt-rd-io-lr-sg,
2689
+ var(--_ctm-tab-dn-pt-rd-io-lr-sg, var(--_ctm-dn-pt-rd-io-lr-sg))
2690
+ );
2691
+ line-height: var(
2692
+ --_ctm-mob-dn-pt-rd-io-le-ht,
2693
+ var(--_ctm-tab-dn-pt-rd-io-le-ht, var(--_ctm-dn-pt-rd-io-le-ht))
2694
+ );
2695
+ text-decoration: var(
2696
+ --_ctm-mob-dn-pt-qy-ss-ue,
2697
+ var(--_ctm-tab-dn-pt-qy-ss-ue, var(--_ctm-dn-pt-qy-ss-ue))
2698
+ );
2699
+ }
2700
+ }
2701
+ }
2702
+ .product_actions_wrapper {
2703
+ padding-block: 16px;
2704
+ border-block: 1px solid var(--_thm-cs-be-se-3);
2705
+ display: flex;
2706
+ align-items: center;
2707
+ gap: 16px;
2708
+ & > a,
2709
+ span {
2710
+ cursor: pointer;
2711
+ display: flex;
2712
+ align-items: center;
2713
+ border-radius: 4px;
2714
+ }
2715
+ & > * {
2716
+ display: flex;
2717
+ align-items: center;
2718
+ justify-content: center;
2719
+ }
2720
+ button {
2721
+ display: flex;
2722
+ }
2723
+ & > a,
2724
+ & > span {
2725
+ border-radius: 4px;
2726
+ padding: 4px;
2727
+ }
2728
+ .edit_icon {
2729
+ cursor: pointer;
2730
+ svg {
2731
+ width: var(
2732
+ --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se,
2733
+ var(
2734
+ --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se,
2735
+ var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se)
2736
+ )
2737
+ );
2738
+ height: var(
2739
+ --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se,
2740
+ var(
2741
+ --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se,
2742
+ var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se)
2743
+ )
2744
+ );
2745
+ path {
2746
+ stroke: var(--_thm-cs-be-se-1);
2747
+ }
2748
+ }
2749
+ &:hover {
2750
+ svg {
2751
+ width: var(
2752
+ --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se,
2753
+ var(
2754
+ --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se,
2755
+ var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se)
2756
+ )
2757
+ );
2758
+ height: var(
2759
+ --_ctm-mob-dn-pt-an-pt-an-et-dt-se-in-se,
2760
+ var(
2761
+ --_ctm-tab-dn-pt-an-pt-an-et-dt-se-in-se,
2762
+ var(--_ctm-dn-pt-an-pt-an-et-dt-se-in-se)
2763
+ )
2764
+ );
2765
+ path {
2766
+ stroke: var(--_thm-cs-at-py);
2767
+ }
2768
+ }
2769
+ }
2770
+ }
2771
+ .wishlist_icon {
2772
+ cursor: pointer;
2773
+ svg {
2774
+ width: var(
2775
+ --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
2776
+ var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
2777
+ );
2778
+ height: var(
2779
+ --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
2780
+ var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
2781
+ );
2782
+ path {
2783
+ stroke: var(--_thm-cs-be-se-1);
2784
+ }
2785
+ }
2786
+ &:hover {
2787
+ svg {
2788
+ width: var(
2789
+ --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
2790
+ var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
2791
+ );
2792
+ height: var(
2793
+ --_ctm-mob-dn-pt-an-pt-an-wt-in-se,
2794
+ var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
2795
+ );
2796
+ path {
2797
+ stroke: var(--_thm-cs-at-py);
2798
+ }
2799
+ }
2800
+ }
2801
+ }
2802
+
2803
+ .delete_cart_icon {
2804
+ cursor: pointer;
2805
+
2806
+ svg {
2807
+ width: var(
2808
+ --_ctm-mob-dn-pt-an-pt-an-de-in-se,
2809
+ var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
2810
+ );
2811
+ height: var(
2812
+ --_ctm-mob-dn-pt-an-pt-an-de-in-se,
2813
+ var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
2814
+ );
2815
+ path {
2816
+ stroke: var(
2817
+ --_ctm-mob-dn-pt-an-pt-an-de-in-c1,
2818
+ var(--_ctm-tab-dn-pt-an-pt-an-de-in-c1, var(--_ctm-dn-pt-an-pt-an-de-in-c1))
2819
+ );
2820
+ }
2821
+ }
2822
+ &:hover {
2823
+ background-color: var(--_error-50);
2824
+ svg {
2825
+ width: var(
2826
+ --_ctm-mob-dn-pt-an-pt-an-de-in-se,
2827
+ var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
2828
+ );
2829
+ height: var(
2830
+ --_ctm-mob-dn-pt-an-pt-an-de-in-se,
2831
+ var(--_ctm-tab-dn-pt-an-pt-an-de-in-se, var(--_ctm-dn-pt-an-pt-an-de-in-se))
2832
+ );
2833
+ path {
2834
+ stroke: var(
2835
+ --_ctm-mob-dn-pt-an-pt-an-de-in-c1,
2836
+ var(--_ctm-tab-dn-pt-an-pt-an-de-in-c1, var(--_ctm-dn-pt-an-pt-an-de-in-c1))
2837
+ );
2838
+ }
2839
+ }
2840
+ }
2841
+ }
2842
+ .svg_icon {
2843
+ display: flex;
2844
+ justify-content: center;
2845
+ align-items: center;
2846
+ }
2847
+ .product_action_button {
2848
+ display: flex;
2849
+ justify-content: center;
2850
+ align-items: center;
2851
+ gap: 8px;
2852
+ }
2853
+ a {
2854
+ width: 33%;
2855
+ display: flex;
2856
+ justify-content: center;
2857
+ border-radius: 4px;
2858
+ padding: 4px !important;
2859
+ &:hover {
2860
+ background-color: color-mix(in srgb, var(--_thm-cs-at-py) 10%, transparent);
2861
+ svg {
2862
+ path {
2863
+ stroke: var(--_thm-cs-at-py);
2864
+ }
2865
+ }
2866
+ }
2867
+ }
2868
+ button {
2869
+ width: 33%;
2870
+ display: flex;
2871
+ justify-content: center;
2872
+ border-radius: 4px;
2873
+ padding: 4px !important;
2874
+ }
2875
+ span:has(.cart-dropdown-container) {
2876
+ width: 33%;
2877
+ display: flex;
2878
+ justify-content: center;
2879
+ border-radius: 4px;
2880
+ button {
2881
+ width: 100%;
2882
+ padding: 0 !important;
2883
+ span {
2884
+ display: flex;
2885
+ align-items: center;
2886
+ border-radius: 4px;
2887
+ }
2888
+ }
2889
+ &:hover {
2890
+ background-color: color-mix(in srgb, var(--_thm-cs-at-py) 10%, transparent);
2891
+ span {
2892
+ svg {
2893
+ path {
2894
+ stroke: var(--_thm-cs-at-py);
2895
+ }
2896
+ }
2897
+ }
2898
+ }
2899
+ }
2900
+ .line_divider {
2901
+ height: 12px;
2902
+ background: var(--_thm-cs-be-se-3);
2903
+ width: 1px;
2904
+ }
2905
+ .primary_link {
2906
+ display: flex;
2907
+ justify-content: center;
2908
+ align-items: center;
2909
+ color: var(
2910
+ --_sf-ft-clr,
2911
+ var(
2912
+ --_ctm-mob-ty-bs-dt-se-tt-cr,
2913
+ var(--_ctm-tab-ty-bs-dt-se-tt-cr, var(--_thm-ty-bs-dt-se-tt-cr, inherit))
2914
+ )
2915
+ ) !important;
2916
+ span {
2917
+ svg {
2918
+ path {
2919
+ stroke: var(
2920
+ --_sf-ft-clr,
2921
+ var(
2922
+ --_ctm-mob-ty-bs-dt-se-tt-cr,
2923
+ var(--_ctm-tab-ty-bs-dt-se-tt-cr, var(--_thm-ty-bs-dt-se-tt-cr, inherit))
2924
+ )
2925
+ );
2926
+ }
2927
+ }
2928
+ }
2929
+ }
2930
+ .destructive {
2931
+ color: var(--_gray-900);
2932
+ display: flex;
2933
+ align-items: center;
2934
+ justify-content: center;
2935
+ span {
2936
+ svg {
2937
+ path {
2938
+ stroke: var(--_gray-600);
2939
+ }
2940
+ }
2941
+ }
2942
+ &:hover {
2943
+ color: var(--_error-500);
2944
+ background-color: var(--_error-50);
2945
+ span {
2946
+ svg {
2947
+ path {
2948
+ stroke: var(--_error-500);
2949
+ }
2950
+ }
2951
+ }
2952
+ }
2953
+ }
2954
+ }
2955
+ }
2956
+ }
2957
+ }
2958
+ }
2959
+ }
2960
+
2141
2961
  .brand_group_wrapper {
2142
2962
  .brand_title {
2143
2963
  margin-bottom: 8px;
@@ -2251,6 +3071,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2251
3071
  }
2252
3072
  }
2253
3073
 
3074
+ @media (max-width: 767px) {
3075
+ .infinite-list-container {
3076
+ gap: 48px;
3077
+ }
3078
+ }
3079
+
2254
3080
  // @media (max-width: 750px) {
2255
3081
  // .product_qty_price_wrapper {
2256
3082
  // // justify-content: flex-start !important;