@sc-360-v2/storefront-cms-library 0.4.47 → 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 (16) hide show
  1. package/dist/add-products-tab.scss +847 -0
  2. package/dist/allocations.scss +217 -218
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-variant-picker.scss +511 -309
  5. package/dist/cart-details.scss +877 -56
  6. package/dist/cart-summary.scss +38 -38
  7. package/dist/cartAttributes.scss +37 -5
  8. package/dist/cartDropdownOverlay.scss +7 -0
  9. package/dist/dropdownTemplate.scss +41 -3
  10. package/dist/language-selector.scss +0 -30
  11. package/dist/profile.scss +2 -2
  12. package/dist/static-global.scss +31 -0
  13. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +215 -0
  14. package/dist/types/builder/tools/element-edit/bulkVariantPicker.d.ts +1 -1
  15. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +66 -0
  16. 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;
@@ -1372,7 +1389,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
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);
1378
1395
  margin-top: 2px;
@@ -1387,10 +1404,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1387
1404
  align-items: center;
1388
1405
  border-radius: 8px 0px 0px 8px;
1389
1406
  p {
1390
- color: #475467;
1391
- font-size: 16px;
1392
- font-weight: 400;
1393
- 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);
1394
1412
  }
1395
1413
  }
1396
1414
  .product_qty_input_container {
@@ -1400,7 +1418,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1400
1418
  width: 55px;
1401
1419
  border-radius: 0px 4px 4px 0px;
1402
1420
  background: #fff;
1403
- border-left: 1px solid #d0d5dd;
1421
+ border-left: 1px solid var(--_thm-cs-be-se-3);
1404
1422
  padding: 8px 12px;
1405
1423
  .svg_icon {
1406
1424
  position: absolute;
@@ -1419,12 +1437,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1419
1437
  // display: flex;
1420
1438
  // padding: 8px 12px;
1421
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);
1422
1444
  // gap: 8px;
1423
1445
  // flex: 1 0 0;
1424
1446
  // align-self: stretch;
1425
1447
  // border-radius: 0px 4px 4px 0px;
1426
1448
  // background: #fff;
1427
- // border-left: 1px solid #d0d5dd;
1449
+ // border-left: 1px solid var(--_thm-cs-be-se-3);
1428
1450
  // max-width: 80px;
1429
1451
  text-align: center;
1430
1452
  width: 75%;
@@ -1522,35 +1544,49 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1522
1544
  cursor: pointer;
1523
1545
  svg {
1524
1546
  width: var(
1525
- --_ctm-mob-dn-pt-an-pt-an-et-in-se,
1526
- 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
+ )
1527
1552
  );
1528
1553
  height: var(
1529
- --_ctm-mob-dn-pt-an-pt-an-et-in-se,
1530
- 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
+ )
1531
1559
  );
1532
1560
  path {
1533
- stroke: var(
1534
- --_ctm-mob-dn-pt-an-pt-an-et-in-c1,
1535
- var(--_ctm-tab-dn-pt-an-pt-an-et-in-c1, var(--_ctm-dn-pt-an-pt-an-et-in-c1))
1536
- );
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);
1537
1566
  }
1538
1567
  }
1539
1568
  &:hover {
1540
1569
  svg {
1541
1570
  width: var(
1542
- --_ctm-mob-dn-pt-an-pt-an-et-in-se,
1543
- 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
+ )
1544
1576
  );
1545
1577
  height: var(
1546
- --_ctm-mob-dn-pt-an-pt-an-et-in-se,
1547
- 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
+ )
1548
1583
  );
1549
1584
  path {
1550
- stroke: var(
1551
- --_ctm-mob-dn-pt-an-pt-an-et-in-c1,
1552
- var(--_ctm-tab-dn-pt-an-pt-an-et-in-c1, var(--_ctm-dn-pt-an-pt-an-et-in-c1))
1553
- );
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
+ // );
1554
1590
  }
1555
1591
  }
1556
1592
  }
@@ -1567,10 +1603,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1567
1603
  var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
1568
1604
  );
1569
1605
  path {
1570
- stroke: var(
1571
- --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
1572
- var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
1573
- );
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);
1574
1611
  }
1575
1612
  }
1576
1613
  &:hover {
@@ -1584,10 +1621,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1584
1621
  var(--_ctm-tab-dn-pt-an-pt-an-wt-in-se, var(--_ctm-dn-pt-an-pt-an-wt-in-se))
1585
1622
  );
1586
1623
  path {
1587
- stroke: var(
1588
- --_ctm-mob-dn-pt-an-pt-an-wt-in-c1,
1589
- var(--_ctm-tab-dn-pt-an-pt-an-wt-in-c1, var(--_ctm-dn-pt-an-pt-an-wt-in-c1))
1590
- );
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);
1591
1629
  }
1592
1630
  }
1593
1631
  }
@@ -2011,7 +2049,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2011
2049
  // align-items: flex-start;
2012
2050
  // align-self: stretch;
2013
2051
  // border-radius: 4px;
2014
- // border: 0.5px solid #d0d5dd;
2052
+ // border: 0.5px solid var(--_thm-cs-be-se-3);
2015
2053
  // background: #fff;
2016
2054
  // box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
2017
2055
 
@@ -2037,7 +2075,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2037
2075
  // align-self: stretch;
2038
2076
  // border-radius: 0px 4px 4px 0px;
2039
2077
  // background: #fff;
2040
- // border-left: 1px solid #d0d5dd;
2078
+ // border-left: 1px solid var(--_thm-cs-be-se-3);
2041
2079
  // max-width: 80px;
2042
2080
  // }
2043
2081
  // }
@@ -2143,6 +2181,783 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2143
2181
  // }
2144
2182
  }
2145
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
+
2146
2961
  .brand_group_wrapper {
2147
2962
  .brand_title {
2148
2963
  margin-bottom: 8px;
@@ -2256,6 +3071,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2256
3071
  }
2257
3072
  }
2258
3073
 
3074
+ @media (max-width: 767px) {
3075
+ .infinite-list-container {
3076
+ gap: 48px;
3077
+ }
3078
+ }
3079
+
2259
3080
  // @media (max-width: 750px) {
2260
3081
  // .product_qty_price_wrapper {
2261
3082
  // // justify-content: flex-start !important;