tee3apps-cms-sdk-react 0.0.19 → 0.0.22

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 (27) hide show
  1. package/dist/index.js +2 -2
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +2 -2
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/Page.tsx +2 -2
  7. package/src/PageComponents/BoxComponent.tsx +142 -92
  8. package/src/PageComponents/Visual-Components/CarouselComponent.tsx +497 -364
  9. package/src/PageComponents/Visual-Components/GroupBrandComponent.tsx +396 -390
  10. package/src/PageComponents/Visual-Components/GroupCategoryComponent.tsx +21 -13
  11. package/src/PageComponents/Visual-Components/GroupImageList.tsx +642 -668
  12. package/src/PageComponents/Visual-Components/GroupProductComponent.tsx +46 -20
  13. package/src/PageComponents/Visual-Components/GroupVideoList.tsx +693 -589
  14. package/src/PageComponents/Visual-Components/ImageComponent.tsx +72 -17
  15. package/src/PageComponents/Visual-Components/LottieComponent.tsx +14 -8
  16. package/src/PageComponents/Visual-Components/NavigationComponent.tsx +74 -27
  17. package/src/PageComponents/Visual-Components/RichTextComponent.tsx +1 -1
  18. package/src/PageComponents/Visual-Components/TabComponent.tsx +1625 -875
  19. package/src/PageComponents/Visual-Components/TextComponent.tsx +24 -10
  20. package/src/PageComponents/Visual-Components/VideoComponent.tsx +33 -11
  21. package/src/PageComponents/Visual-Components/tab.css +645 -611
  22. package/src/index.css +126 -80
  23. package/src/Components/BoxRenderer.tsx +0 -108
  24. package/src/Components/ComponentRenderer.tsx +0 -29
  25. package/src/Components/ImageComponent.tsx +0 -68
  26. package/src/Components/RowComponent.tsx +0 -66
  27. package/src/Components/TextComponent.tsx +0 -47
package/src/PageComponents/Visual-Components/tab.css CHANGED
@@ -1,692 +1,726 @@
1
1
  .media-box {
2
- width: 100%;
3
- overflow: hidden;
4
- display: block;
5
- }
6
-
7
- .media-content {
8
- width: 100%;
9
- height: auto;
10
- display: block;
11
- }
12
-
13
- /* Video specific styles */
14
- video.media-content {
15
- background-color: #000;
16
- }
17
-
18
- video.media-content::-webkit-media-controls {
19
- background-color: rgba(0, 0, 0, 0.3);
20
- }
21
-
22
- video.media-content::-webkit-media-controls-panel {
23
- background-color: rgba(0, 0, 0, 0.3);
24
- }
25
- /* Base Card */
26
- .product-card {
27
- display: flex;
28
- width: 100%;
29
- height: 100%;
30
- min-height: 200px;
31
- background: #fff;
32
- border-radius: 16px;
33
- box-shadow: 0 6px 30px rgba(0, 0, 0, 0.06);
34
- overflow: hidden;
35
- transition: all 0.3s ease-in-out;
36
- border: 1px solid #d1fae5;
37
- flex-shrink: 0;
38
- }
39
-
40
- .product-card:hover {
41
- transform: translateY(-3px);
42
- box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
43
- }
44
-
45
- /* Image */
46
- .product-image-container {
47
- flex: 0 0 45%;
48
- min-height: 200px;
49
- padding: 20px;
50
- display: flex;
51
- align-items: center;
52
- justify-content: center;
53
- overflow: hidden;
54
- flex-shrink: 0;
55
- }
56
-
57
- .product-image {
58
- width: 100%;
59
- height: 100%;
60
- object-fit: contain;
61
- transition: transform 0.3s ease-in-out;
62
- max-width: 100%;
63
- max-height: 100%;
64
- }
65
-
66
- .product-image:hover {
67
- transform: scale(1.07);
68
- }
69
-
70
- /* Details */
71
- .product-details {
72
- flex: 1;
73
- padding: 20px;
74
- display: flex;
75
- flex-direction: column;
76
- justify-content: flex-start;
77
- overflow-y: auto;
78
- }
79
-
80
- /* Header */
81
- .product-header {
82
- margin-bottom: 16px;
83
- }
84
-
85
- .product-brand {
86
- font-size: 13px;
87
- font-weight: 700;
88
- text-transform: uppercase;
89
- margin-bottom: 6px;
90
- letter-spacing: 0.5px;
91
- color: #6b7280;
92
- }
93
-
94
- .product-name {
95
- font-size: 20px;
96
- font-weight: 800;
97
- color: #111827;
98
- line-height: 1.3;
99
- margin-bottom: 8px;
100
- }
101
-
102
- .product-code {
103
- font-size: 12px;
104
- font-family: 'Courier New', monospace;
105
- color: #6b7280;
106
- margin-bottom: 0;
107
- }
108
-
109
- /* Additional Details for 1x1 layout */
110
- .product-description,
111
- .product-manufacturer,
112
- .product-category {
113
- margin-bottom: 12px;
114
- display: flex;
115
- flex-direction: column;
116
- gap: 4px;
117
- }
118
-
119
- .detail-label {
120
- font-size: 11px;
121
- color: #6b7280;
122
- font-weight: 500;
123
- text-transform: uppercase;
124
- letter-spacing: 0.3px;
125
- }
126
-
127
- .detail-value {
128
- font-size: 13px;
129
- color: #374151;
130
- line-height: 1.4;
131
- display: -webkit-box;
132
- -webkit-line-clamp: 2;
133
- line-clamp: 2;
134
- -webkit-box-orient: vertical;
135
- overflow: hidden;
136
- }
137
-
138
- /* Variant Tags */
139
- .product-variants {
140
- display: flex;
141
- flex-wrap: wrap;
142
- gap: 8px;
143
- margin-bottom: 16px;
144
- }
145
-
146
- .variant-tag {
147
- color: #065f46;
148
- border: 1px solid #212423;
149
- padding: 6px 12px;
150
- font-size: 12px;
151
- font-weight: 600;
152
- border-radius: 9999px;
153
- text-transform: capitalize;
154
- background-color: #f0f9ff;
155
- }
156
-
157
- /* Pricing */
158
- .product-pricing {
159
- margin-bottom: 16px;
160
- }
161
-
162
- .price-row {
163
- display: flex;
164
- align-items: center;
165
- gap: 12px;
166
- flex-wrap: wrap;
167
- }
168
-
169
- .current-price {
170
- font-size: 22px;
171
- font-weight: 800;
172
- color: #10b981;
173
- }
174
-
175
- .original-price {
176
- font-size: 16px;
177
- color: #9ca3af;
178
- text-decoration: line-through;
179
- }
180
-
181
- .offer-badge {
182
- background-color: #d1fae5;
183
- color: #047857;
184
- font-size: 12px;
185
- font-weight: 700;
186
- padding: 4px 8px;
187
- border-radius: 999px;
188
- border: 1px solid #6ee7b7;
189
- box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
190
- }
191
-
192
- /* Rating */
193
- .product-rating {
194
- display: flex;
195
- align-items: center;
196
- gap: 8px;
197
- margin-bottom: 0;
198
- }
199
-
200
- .stars {
201
- display: flex;
202
- gap: 2px;
203
- }
204
-
205
- .star {
206
- color: #fbbf24;
207
- font-size: 16px;
208
- }
209
-
210
- .star.empty {
211
- color: #e5e7eb;
212
- }
213
-
214
- .rating-text {
215
- font-size: 13px;
216
- color: #6b7280;
217
- }
218
-
219
- /* Button (optional footer for CTA) */
220
- .product-footer {
221
- margin-top: 24px;
222
- display: flex;
223
- justify-content: space-between;
224
- align-items: center;
225
- border-top: 1px solid #f3f4f6;
226
- padding-top: 16px;
227
- }
228
-
229
- /* Layout-specific styles */
2
+ width: 100%;
3
+ height: 100%;
4
+ display: flex;
5
+ justify-content: center;
6
+ align-items: center;
7
+ background-color: #f4f4f4;
8
+ overflow: hidden;
9
+ box-sizing: border-box;
10
+ }
11
+
12
+ .media-content {
13
+ height: 100%;
14
+ width: 100%;
15
+ object-fit: contain;
16
+ }
17
+
18
+ img.media-content {
19
+ object-fit: contain;
20
+ }
21
+
22
+ /* Scroll container styling */
23
+ .scroll-container {
24
+ scrollbar-width: thin;
25
+ scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
26
+ }
27
+
28
+ .scroll-container::-webkit-scrollbar {
29
+ width: 8px;
30
+ height: 8px;
31
+ }
32
+
33
+ .scroll-container::-webkit-scrollbar-track {
34
+ background: transparent;
35
+ }
36
+
37
+ .scroll-container::-webkit-scrollbar-thumb {
38
+ background-color: rgba(0, 0, 0, 0.3);
39
+ border-radius: 4px;
40
+ }
41
+
42
+ .scroll-container::-webkit-scrollbar-thumb:hover {
43
+ background-color: rgba(0, 0, 0, 0.5);
44
+ }
45
+
46
+ /* Video specific styles */
47
+ video.media-content {
48
+ object-fit: cover;
49
+ background-color: #000;
50
+ }
51
+
52
+ video.media-content::-webkit-media-controls {
53
+ background-color: rgba(0, 0, 0, 0.3);
54
+ }
55
+
56
+ video.media-content::-webkit-media-controls-panel {
57
+ background-color: rgba(0, 0, 0, 0.3);
58
+ }
59
+ /* Base Card */
60
+ .product-card {
61
+ display: flex;
62
+ width: 100%;
63
+ height: 100%;
64
+ min-height: 200px;
65
+ background: #fff;
66
+ border-radius: 16px;
67
+ box-shadow: 0 6px 30px rgba(0, 0, 0, 0.06);
68
+ overflow: hidden;
69
+ transition: all 0.3s ease-in-out;
70
+ border: 1px solid #d1fae5;
71
+ flex-shrink: 0;
72
+ }
73
+
74
+ .product-card:hover {
75
+ transform: translateY(-3px);
76
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
77
+ }
78
+
79
+ /* Image */
80
+ .product-image-container {
81
+ flex: 0 0 45%;
82
+ min-height: 200px;
83
+ padding: 20px;
84
+ display: flex;
85
+ align-items: center;
86
+ justify-content: center;
87
+ overflow: hidden;
88
+ flex-shrink: 0;
89
+ }
90
+
91
+ .product-image {
92
+ width: 100%;
93
+ height: 100%;
94
+ object-fit: contain;
95
+ transition: transform 0.3s ease-in-out;
96
+ max-width: 100%;
97
+ max-height: 100%;
98
+ }
99
+
100
+ .product-image:hover {
101
+ transform: scale(1.07);
102
+ }
103
+
104
+ /* Details */
105
+ .product-details {
106
+ flex: 1;
107
+ padding: 20px;
108
+ display: flex;
109
+ flex-direction: column;
110
+ justify-content: flex-start;
111
+ overflow-y: auto;
112
+ }
113
+
114
+ /* Header */
115
+ .product-header {
116
+ margin-bottom: 16px;
117
+ }
118
+
119
+ .product-brand {
120
+ font-size: 13px;
121
+ font-weight: 700;
122
+ text-transform: uppercase;
123
+ margin-bottom: 6px;
124
+ letter-spacing: 0.5px;
125
+ color: #6b7280;
126
+ }
127
+
128
+ .product-name {
129
+ font-size: 20px;
130
+ font-weight: 800;
131
+ color: #111827;
132
+ line-height: 1.3;
133
+ margin-bottom: 8px;
134
+ }
135
+
136
+ .product-code {
137
+ font-size: 12px;
138
+ font-family: 'Courier New', monospace;
139
+ color: #6b7280;
140
+ margin-bottom: 0;
141
+ }
142
+
143
+ /* Additional Details for 1x1 layout */
144
+ .product-description,
145
+ .product-manufacturer,
146
+ .product-category {
147
+ margin-bottom: 12px;
148
+ display: flex;
149
+ flex-direction: column;
150
+ gap: 4px;
151
+ }
152
+
153
+ .detail-label {
154
+ font-size: 11px;
155
+ color: #6b7280;
156
+ font-weight: 500;
157
+ text-transform: uppercase;
158
+ letter-spacing: 0.3px;
159
+ }
160
+
161
+ .detail-value {
162
+ font-size: 13px;
163
+ color: #374151;
164
+ line-height: 1.4;
165
+ display: -webkit-box;
166
+ -webkit-line-clamp: 2;
167
+ line-clamp: 2;
168
+ -webkit-box-orient: vertical;
169
+ overflow: hidden;
170
+ }
171
+
172
+ /* Variant Tags */
173
+ .product-variants {
174
+ display: flex;
175
+ flex-wrap: wrap;
176
+ gap: 8px;
177
+ margin-bottom: 16px;
178
+ }
179
+
180
+ .variant-tag {
181
+ color: #065f46;
182
+ border: 1px solid #212423;
183
+ padding: 6px 12px;
184
+ font-size: 12px;
185
+ font-weight: 600;
186
+ border-radius: 9999px;
187
+ text-transform: capitalize;
188
+ background-color: #f0f9ff;
189
+ }
190
+
191
+ /* Pricing */
192
+ .product-pricing {
193
+ margin-bottom: 16px;
194
+ }
195
+
196
+ .price-row {
197
+ display: flex;
198
+ align-items: center;
199
+ gap: 12px;
200
+ flex-wrap: wrap;
201
+ }
202
+
203
+ .current-price {
204
+ font-size: 22px;
205
+ font-weight: 800;
206
+ color: #10b981;
207
+ }
208
+
209
+ .original-price {
210
+ font-size: 16px;
211
+ color: #9ca3af;
212
+ text-decoration: line-through;
213
+ }
214
+
215
+ .offer-badge {
216
+ background-color: #d1fae5;
217
+ color: #047857;
218
+ font-size: 12px;
219
+ font-weight: 700;
220
+ padding: 4px 8px;
221
+ border-radius: 999px;
222
+ border: 1px solid #6ee7b7;
223
+ box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
224
+ }
225
+
226
+ /* Rating */
227
+ .product-rating {
228
+ display: flex;
229
+ align-items: center;
230
+ gap: 8px;
231
+ margin-bottom: 0;
232
+ }
233
+
234
+ .stars {
235
+ display: flex;
236
+ gap: 2px;
237
+ }
238
+
239
+ .star {
240
+ color: #fbbf24;
241
+ font-size: 16px;
242
+ }
243
+
244
+ .star.empty {
245
+ color: #e5e7eb;
246
+ }
247
+
248
+ .rating-text {
249
+ font-size: 13px;
250
+ color: #6b7280;
251
+ }
252
+
253
+ /* Button (optional footer for CTA) */
254
+ .product-footer {
255
+ margin-top: 24px;
256
+ display: flex;
257
+ justify-content: space-between;
258
+ align-items: center;
259
+ border-top: 1px solid #f3f4f6;
260
+ padding-top: 16px;
261
+ }
262
+
263
+ /* Layout-specific styles */
264
+ .product-card.carousel-mode {
265
+ flex-direction: row;
266
+ height: 100%;
267
+ min-height: 300px;
268
+ flex-shrink: 0;
269
+ }
270
+
271
+ .product-card.carousel-mode .product-image-container {
272
+ flex: 0 0 50%;
273
+ min-height: 300px;
274
+ flex-shrink: 0;
275
+ }
276
+
277
+ .product-card.carousel-mode .product-details {
278
+ flex: 1;
279
+ padding: 24px;
280
+ min-height: 300px;
281
+ display: flex;
282
+ flex-direction: column;
283
+ justify-content: flex-start;
284
+ overflow-y: auto;
285
+ }
286
+
287
+ /* Carousel mode specific spacing */
288
+ .product-card.carousel-mode .product-header {
289
+ margin-bottom: 20px;
290
+ }
291
+
292
+ .product-card.carousel-mode .product-variants {
293
+ margin-bottom: 20px;
294
+ }
295
+
296
+ .product-card.carousel-mode .product-pricing {
297
+ margin-bottom: 20px;
298
+ }
299
+
300
+ .product-card.carousel-mode .product-rating {
301
+ margin-bottom: 0;
302
+ }
303
+
304
+ /* 2x1 Layout (Horizontal compact) */
305
+ .product-card.layout-2x1 {
306
+ flex-direction: row;
307
+ height: 100%;
308
+ min-height: 140px;
309
+ cursor: pointer;
310
+ transition: all 0.3s ease;
311
+ flex-shrink: 0;
312
+ }
313
+
314
+ .product-card.layout-2x1:hover {
315
+ transform: translateY(-2px);
316
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
317
+ }
318
+
319
+ .product-card.layout-2x1 .product-image-container {
320
+ flex: 0 0 42%;
321
+ min-height: 140px;
322
+ position: relative;
323
+ overflow: hidden;
324
+ flex-shrink: 0;
325
+ padding: 16px;
326
+ display: flex;
327
+ align-items: center;
328
+ justify-content: center;
329
+ }
330
+
331
+ .product-card.layout-2x1 .product-details {
332
+ flex: 1;
333
+ min-height: 140px;
334
+ display: flex;
335
+ padding-left: 20px;
336
+ flex-direction: row;
337
+ justify-content: start;
338
+ align-items: center;
339
+ overflow: hidden;
340
+ }
341
+
342
+ .product-card.layout-2x1 .product-header {
343
+ margin-bottom: 8px;
344
+ }
345
+
346
+ .product-card.layout-2x1 .product-brand {
347
+ font-size: 11px;
348
+ color: #9ca3af;
349
+ margin-bottom: 3px;
350
+ font-weight: 600;
351
+ }
352
+
353
+ .product-card.layout-2x1 .product-name {
354
+ font-size: 15px;
355
+ font-weight: 600;
356
+ margin-bottom: 4px;
357
+ line-height: 1.3;
358
+ display: -webkit-box;
359
+ -webkit-line-clamp: 2;
360
+ line-clamp: 2;
361
+ -webkit-box-orient: vertical;
362
+ overflow: hidden;
363
+ color: #111827;
364
+ }
365
+
366
+ .product-card.layout-2x1 .product-code {
367
+ font-size: 10px;
368
+ color: #6b7280;
369
+ margin-bottom: 0;
370
+ }
371
+
372
+ .product-card.layout-2x1 .product-pricing {
373
+ margin-bottom: 8px;
374
+ }
375
+
376
+ .product-card.layout-2x1 .current-price {
377
+ font-size: 16px;
378
+ font-weight: 700;
379
+ color: #10b981;
380
+ }
381
+
382
+ .product-card.layout-2x1 .original-price {
383
+ font-size: 13px;
384
+ color: #9ca3af;
385
+ text-decoration: line-through;
386
+ }
387
+
388
+ .product-card.layout-2x1 .offer-badge {
389
+ font-size: 10px;
390
+ padding: 3px 7px;
391
+ }
392
+
393
+ .product-card.layout-2x1 .product-rating {
394
+ margin-bottom: 0;
395
+ gap: 6px;
396
+ }
397
+
398
+ .product-card.layout-2x1 .rating-text {
399
+ font-size: 11px;
400
+ }
401
+
402
+ .product-card.layout-2x1 .stars {
403
+ gap: 2px;
404
+ }
405
+
406
+ .product-card.layout-2x1 .star {
407
+ font-size: 13px;
408
+ }
409
+
410
+ .product-card.layout-2x1 .product-variants {
411
+ display: none; /* Hide variants in 2x1 mode */
412
+ }
413
+
414
+ .product-card.layout-2x1 .product-footer {
415
+ display: none; /* Hide footer in 2x1 mode */
416
+ }
417
+
418
+ .product-card.grid-mode {
419
+ flex-direction: row;
420
+ height: 100%;
421
+ min-height: 120px;
422
+ cursor: pointer;
423
+ transition: all 0.3s ease;
424
+ flex-shrink: 0;
425
+ }
426
+
427
+ .product-card.grid-mode:hover {
428
+ transform: translateY(-2px);
429
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
430
+ }
431
+
432
+ .product-card.grid-mode .product-image-container {
433
+ flex: 0 0 40%;
434
+ min-height: 120px;
435
+ position: relative;
436
+ overflow: hidden;
437
+ flex-shrink: 0;
438
+ padding: 12px;
439
+ }
440
+
441
+ .product-card.grid-mode .product-details {
442
+ flex: 1;
443
+ padding: 16px;
444
+ min-height: 150px;
445
+ padding-top: 40px;
446
+ display: flex;
447
+ flex-direction: column;
448
+ justify-content: center;
449
+ overflow: hidden;
450
+ }
451
+
452
+ .product-card.grid-mode .product-header {
453
+ margin-bottom: 1px;
454
+ }
455
+
456
+ .product-card.grid-mode .product-name {
457
+ font-size: 14px;
458
+ font-weight: 600;
459
+ margin-bottom: 1px;
460
+ line-height: 1.2;
461
+ display: -webkit-box;
462
+ -webkit-line-clamp: 2;
463
+ line-clamp: 2;
464
+ -webkit-box-orient: vertical;
465
+ overflow: hidden;
466
+ }
467
+
468
+ .product-card.grid-mode .product-code {
469
+ font-size: 10px;
470
+ color: #6b7280;
471
+ margin-bottom: 0;
472
+ }
473
+
474
+ .product-card.grid-mode .product-brand {
475
+ font-size: 10px;
476
+ color: #9ca3af;
477
+ margin-bottom: 1px;
478
+ }
479
+
480
+ .product-card.grid-mode .product-pricing {
481
+ margin-bottom: 1px;
482
+ }
483
+
484
+ .product-card.grid-mode .current-price {
485
+ font-size: 14px;
486
+ font-weight: 700;
487
+ color: #10b981;
488
+ }
489
+
490
+ .product-card.grid-mode .original-price {
491
+ font-size: 12px;
492
+ color: #9ca3af;
493
+ text-decoration: line-through;
494
+ }
495
+
496
+ .product-card.grid-mode .offer-badge {
497
+ font-size: 10px;
498
+ padding: 2px 6px;
499
+ }
500
+
501
+ .product-card.grid-mode .product-rating {
502
+ margin-bottom: 0;
503
+ gap: 6px;
504
+ }
505
+
506
+ .product-card.grid-mode .rating-text {
507
+ font-size: 11px;
508
+ }
509
+
510
+ .product-card.grid-mode .stars {
511
+ gap: 1px;
512
+ }
513
+
514
+ .product-card.grid-mode .star {
515
+ font-size: 12px;
516
+ }
517
+
518
+ .product-card.grid-mode .product-variants {
519
+ display: none; /* Hide variants in compact mode */
520
+ }
521
+
522
+ .product-card.grid-mode .product-footer {
523
+ display: none; /* Hide footer in compact mode */
524
+ }
525
+
526
+ /* Responsive */
527
+ @media (max-width: 768px) {
230
528
  .product-card.carousel-mode {
231
- flex-direction: row;
232
- height: 100%;
233
- min-height: 300px;
234
- flex-shrink: 0;
529
+ flex-direction: column;
530
+ min-height: 200px;
235
531
  }
236
-
532
+
237
533
  .product-card.carousel-mode .product-image-container {
238
- flex: 0 0 50%;
239
- min-height: 300px;
240
- flex-shrink: 0;
534
+ flex: 0 0 200px;
535
+ min-height: 200px;
241
536
  }
242
-
537
+
243
538
  .product-card.carousel-mode .product-details {
244
- flex: 1;
245
- padding: 24px;
246
- min-height: 300px;
247
- display: flex;
248
- flex-direction: column;
249
- justify-content: flex-start;
250
- overflow-y: auto;
539
+ padding: 16px;
540
+ min-height: auto;
251
541
  }
252
542
 
253
- /* Carousel mode specific spacing */
254
543
  .product-card.carousel-mode .product-header {
255
- margin-bottom: 20px;
544
+ margin-bottom: 16px;
256
545
  }
257
546
 
258
547
  .product-card.carousel-mode .product-variants {
259
- margin-bottom: 20px;
548
+ margin-bottom: 16px;
260
549
  }
261
550
 
262
551
  .product-card.carousel-mode .product-pricing {
263
- margin-bottom: 20px;
552
+ margin-bottom: 16px;
264
553
  }
265
-
266
- .product-card.carousel-mode .product-rating {
267
- margin-bottom: 0;
554
+
555
+ .product-card.carousel-mode .product-name {
556
+ font-size: 18px;
268
557
  }
269
-
270
- /* 2x1 Layout (Horizontal compact) */
271
- .product-card.layout-2x1 {
272
- flex-direction: row;
273
- height: 100%;
274
- min-height: 140px;
275
- cursor: pointer;
276
- transition: all 0.3s ease;
277
- flex-shrink: 0;
558
+
559
+ .product-card.carousel-mode .current-price {
560
+ font-size: 18px;
278
561
  }
279
562
 
280
- .product-card.layout-2x1:hover {
281
- transform: translateY(-2px);
282
- box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
563
+ /* 2x1 Layout responsive */
564
+ .product-card.layout-2x1 {
565
+ min-height: 120px;
283
566
  }
284
567
 
285
568
  .product-card.layout-2x1 .product-image-container {
286
- flex: 0 0 42%;
287
- min-height: 140px;
288
- position: relative;
289
- overflow: hidden;
290
- flex-shrink: 0;
291
- padding: 16px;
292
- display: flex;
293
- align-items: center;
294
- justify-content: center;
569
+ flex: 0 0 38%;
570
+ min-height: 120px;
571
+ padding: 12px;
295
572
  }
296
573
 
297
574
  .product-card.layout-2x1 .product-details {
298
- flex: 1;
299
- min-height: 140px;
300
- display: flex;
301
- padding-left: 20px;
302
- flex-direction: row;
303
- justify-content: start;
304
- align-items: center;
305
- overflow: hidden;
575
+ padding: 12px 16px;
576
+ min-height: 120px;
306
577
  }
307
-
578
+
308
579
  .product-card.layout-2x1 .product-header {
309
- margin-bottom: 8px;
580
+ margin-bottom: 6px;
310
581
  }
311
-
312
- .product-card.layout-2x1 .product-brand {
313
- font-size: 11px;
314
- color: #9ca3af;
315
- margin-bottom: 3px;
316
- font-weight: 600;
582
+
583
+ .product-card.layout-2x1 .product-pricing {
584
+ margin-bottom: 6px;
317
585
  }
318
586
 
319
587
  .product-card.layout-2x1 .product-name {
320
- font-size: 15px;
321
- font-weight: 600;
322
- margin-bottom: 4px;
323
- line-height: 1.3;
324
- display: -webkit-box;
325
- -webkit-line-clamp: 2;
326
- line-clamp: 2;
327
- -webkit-box-orient: vertical;
328
- overflow: hidden;
329
- color: #111827;
330
- }
331
-
332
- .product-card.layout-2x1 .product-code {
333
- font-size: 10px;
334
- color: #6b7280;
335
- margin-bottom: 0;
336
- }
337
-
338
- .product-card.layout-2x1 .product-pricing {
339
- margin-bottom: 8px;
588
+ font-size: 14px;
340
589
  }
341
590
 
342
591
  .product-card.layout-2x1 .current-price {
343
- font-size: 16px;
344
- font-weight: 700;
345
- color: #10b981;
592
+ font-size: 14px;
346
593
  }
347
-
348
- .product-card.layout-2x1 .original-price {
349
- font-size: 13px;
350
- color: #9ca3af;
351
- text-decoration: line-through;
594
+
595
+ /* Keep grid mode horizontal on mobile */
596
+ .product-card.grid-mode {
597
+ flex-direction: row;
598
+ min-height: 100px;
352
599
  }
353
600
 
354
- .product-card.layout-2x1 .offer-badge {
355
- font-size: 10px;
356
- padding: 3px 7px;
601
+ .product-card.grid-mode .product-image-container {
602
+ flex: 0 0 35%;
603
+ min-height: 100px;
604
+ padding: 8px;
357
605
  }
358
606
 
359
- .product-card.layout-2x1 .product-rating {
360
- margin-bottom: 0;
361
- gap: 6px;
607
+ .product-card.grid-mode .product-details {
608
+ padding: 12px;
609
+ min-height: 100px;
362
610
  }
363
-
364
- .product-card.layout-2x1 .rating-text {
365
- font-size: 11px;
611
+
612
+ .product-card.grid-mode .product-header {
613
+ margin-bottom: 6px;
366
614
  }
367
-
368
- .product-card.layout-2x1 .stars {
369
- gap: 2px;
615
+
616
+ .product-card.grid-mode .product-pricing {
617
+ margin-bottom: 6px;
370
618
  }
371
619
 
372
- .product-card.layout-2x1 .star {
620
+ .product-card.grid-mode .product-name {
373
621
  font-size: 13px;
374
622
  }
375
623
 
376
- .product-card.layout-2x1 .product-variants {
377
- display: none; /* Hide variants in 2x1 mode */
378
- }
379
-
380
- .product-card.layout-2x1 .product-footer {
381
- display: none; /* Hide footer in 2x1 mode */
624
+ .product-card.grid-mode .current-price {
625
+ font-size: 13px;
382
626
  }
383
-
384
- .product-card.grid-mode {
385
- flex-direction: row;
386
- height: 100%;
387
- min-height: 120px;
388
- cursor: pointer;
389
- transition: all 0.3s ease;
390
- flex-shrink: 0;
627
+ }
628
+
629
+ @media (max-width: 480px) {
630
+ .product-card.carousel-mode {
631
+ min-height: 180px;
391
632
  }
392
633
 
393
- .product-card.grid-mode:hover {
394
- transform: translateY(-2px);
395
- box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
634
+ .product-card.carousel-mode .product-image-container {
635
+ flex: 0 0 150px;
636
+ min-height: 150px;
396
637
  }
397
638
 
398
- .product-card.grid-mode .product-image-container {
399
- flex: 0 0 40%;
400
- min-height: 120px;
401
- position: relative;
402
- overflow: hidden;
403
- flex-shrink: 0;
639
+ .product-card.carousel-mode .product-details {
404
640
  padding: 12px;
405
641
  }
406
-
407
- .product-card.grid-mode .product-details {
408
- flex: 1;
409
- padding: 16px;
410
- min-height: 150px;
411
- padding-top: 40px;
412
- display: flex;
413
- flex-direction: column;
414
- justify-content: center;
415
- overflow: hidden;
642
+
643
+ .product-card.carousel-mode .product-header {
644
+ margin-bottom: 12px;
416
645
  }
417
-
418
- .product-card.grid-mode .product-header {
419
- margin-bottom: 1px;
646
+
647
+ .product-card.carousel-mode .product-variants {
648
+ margin-bottom: 12px;
420
649
  }
421
-
422
- .product-card.grid-mode .product-name {
423
- font-size: 14px;
424
- font-weight: 600;
425
- margin-bottom: 1px;
426
- line-height: 1.2;
427
- display: -webkit-box;
428
- -webkit-line-clamp: 2;
429
- line-clamp: 2;
430
- -webkit-box-orient: vertical;
431
- overflow: hidden;
650
+
651
+ .product-card.carousel-mode .product-pricing {
652
+ margin-bottom: 12px;
432
653
  }
433
654
 
434
- .product-card.grid-mode .product-code {
435
- font-size: 10px;
436
- color: #6b7280;
437
- margin-bottom: 0;
655
+ .product-card.carousel-mode .product-name {
656
+ font-size: 16px;
438
657
  }
439
658
 
440
- .product-card.grid-mode .product-brand {
441
- font-size: 10px;
442
- color: #9ca3af;
443
- margin-bottom: 1px;
659
+ .product-card.carousel-mode .current-price {
660
+ font-size: 16px;
444
661
  }
445
-
446
- .product-card.grid-mode .product-pricing {
447
- margin-bottom: 1px;
662
+
663
+ /* 2x1 Layout on very small screens */
664
+ .product-card.layout-2x1 {
665
+ min-height: 100px;
448
666
  }
449
667
 
450
- .product-card.grid-mode .current-price {
451
- font-size: 14px;
452
- font-weight: 700;
453
- color: #10b981;
668
+ .product-card.layout-2x1 .product-image-container {
669
+ flex: 0 0 35%;
670
+ min-height: 100px;
671
+ padding: 8px;
454
672
  }
455
673
 
456
- .product-card.grid-mode .original-price {
457
- font-size: 12px;
458
- color: #9ca3af;
459
- text-decoration: line-through;
674
+ .product-card.layout-2x1 .product-details {
675
+ padding: 8px 12px;
676
+ min-height: 100px;
460
677
  }
461
-
462
- .product-card.grid-mode .offer-badge {
463
- font-size: 10px;
464
- padding: 2px 6px;
678
+
679
+ .product-card.layout-2x1 .product-header {
680
+ margin-bottom: 4px;
465
681
  }
466
-
467
- .product-card.grid-mode .product-rating {
468
- margin-bottom: 0;
469
- gap: 6px;
682
+
683
+ .product-card.layout-2x1 .product-pricing {
684
+ margin-bottom: 4px;
470
685
  }
471
686
 
472
- .product-card.grid-mode .rating-text {
473
- font-size: 11px;
687
+ .product-card.layout-2x1 .product-name {
688
+ font-size: 13px;
474
689
  }
475
690
 
476
- .product-card.grid-mode .stars {
477
- gap: 1px;
691
+ .product-card.layout-2x1 .current-price {
692
+ font-size: 13px;
478
693
  }
479
694
 
480
- .product-card.grid-mode .star {
481
- font-size: 12px;
695
+ /* Grid mode on very small screens */
696
+ .product-card.grid-mode {
697
+ min-height: 90px;
482
698
  }
483
699
 
484
- .product-card.grid-mode .product-variants {
485
- display: none; /* Hide variants in compact mode */
700
+ .product-card.grid-mode .product-image-container {
701
+ flex: 0 0 32%;
702
+ min-height: 90px;
703
+ padding: 6px;
486
704
  }
487
705
 
488
- .product-card.grid-mode .product-footer {
489
- display: none; /* Hide footer in compact mode */
706
+ .product-card.grid-mode .product-details {
707
+ padding: 8px;
708
+ min-height: 90px;
490
709
  }
491
710
 
492
- /* Responsive */
493
- @media (max-width: 768px) {
494
- .product-card.carousel-mode {
495
- flex-direction: column;
496
- min-height: 200px;
497
- }
498
-
499
- .product-card.carousel-mode .product-image-container {
500
- flex: 0 0 200px;
501
- min-height: 200px;
502
- }
503
-
504
- .product-card.carousel-mode .product-details {
505
- padding: 16px;
506
- min-height: auto;
507
- }
508
-
509
- .product-card.carousel-mode .product-header {
510
- margin-bottom: 16px;
511
- }
512
-
513
- .product-card.carousel-mode .product-variants {
514
- margin-bottom: 16px;
515
- }
516
-
517
- .product-card.carousel-mode .product-pricing {
518
- margin-bottom: 16px;
519
- }
520
-
521
- .product-card.carousel-mode .product-name {
522
- font-size: 18px;
523
- }
711
+ .product-card.grid-mode .product-header {
712
+ margin-bottom: 4px;
713
+ }
714
+
715
+ .product-card.grid-mode .product-pricing {
716
+ margin-bottom: 4px;
717
+ }
524
718
 
525
- .product-card.carousel-mode .current-price {
526
- font-size: 18px;
527
- }
528
-
529
- /* 2x1 Layout responsive */
530
- .product-card.layout-2x1 {
531
- min-height: 120px;
532
- }
533
-
534
- .product-card.layout-2x1 .product-image-container {
535
- flex: 0 0 38%;
536
- min-height: 120px;
537
- padding: 12px;
538
- }
539
-
540
- .product-card.layout-2x1 .product-details {
541
- padding: 12px 16px;
542
- min-height: 120px;
543
- }
544
-
545
- .product-card.layout-2x1 .product-header {
546
- margin-bottom: 6px;
547
- }
548
-
549
- .product-card.layout-2x1 .product-pricing {
550
- margin-bottom: 6px;
551
- }
552
-
553
- .product-card.layout-2x1 .product-name {
554
- font-size: 14px;
555
- }
556
-
557
- .product-card.layout-2x1 .current-price {
558
- font-size: 14px;
559
- }
560
-
561
- /* Keep grid mode horizontal on mobile */
562
- .product-card.grid-mode {
563
- flex-direction: row;
564
- min-height: 100px;
565
- }
566
-
567
- .product-card.grid-mode .product-image-container {
568
- flex: 0 0 35%;
569
- min-height: 100px;
570
- padding: 8px;
571
- }
572
-
573
- .product-card.grid-mode .product-details {
574
- padding: 12px;
575
- min-height: 100px;
576
- }
577
-
578
- .product-card.grid-mode .product-header {
579
- margin-bottom: 6px;
580
- }
581
-
582
- .product-card.grid-mode .product-pricing {
583
- margin-bottom: 6px;
584
- }
585
-
586
- .product-card.grid-mode .product-name {
587
- font-size: 13px;
588
- }
589
-
590
- .product-card.grid-mode .current-price {
591
- font-size: 13px;
592
- }
719
+ .product-card.grid-mode .product-name {
720
+ font-size: 12px;
593
721
  }
594
722
 
595
- @media (max-width: 480px) {
596
- .product-card.carousel-mode {
597
- min-height: 180px;
598
- }
599
-
600
- .product-card.carousel-mode .product-image-container {
601
- flex: 0 0 150px;
602
- min-height: 150px;
603
- }
604
-
605
- .product-card.carousel-mode .product-details {
606
- padding: 12px;
607
- }
608
-
609
- .product-card.carousel-mode .product-header {
610
- margin-bottom: 12px;
611
- }
612
-
613
- .product-card.carousel-mode .product-variants {
614
- margin-bottom: 12px;
615
- }
616
-
617
- .product-card.carousel-mode .product-pricing {
618
- margin-bottom: 12px;
619
- }
620
-
621
- .product-card.carousel-mode .product-name {
622
- font-size: 16px;
623
- }
624
-
625
- .product-card.carousel-mode .current-price {
626
- font-size: 16px;
627
- }
628
-
629
- /* 2x1 Layout on very small screens */
630
- .product-card.layout-2x1 {
631
- min-height: 100px;
632
- }
633
-
634
- .product-card.layout-2x1 .product-image-container {
635
- flex: 0 0 35%;
636
- min-height: 100px;
637
- padding: 8px;
638
- }
639
-
640
- .product-card.layout-2x1 .product-details {
641
- padding: 8px 12px;
642
- min-height: 100px;
643
- }
644
-
645
- .product-card.layout-2x1 .product-header {
646
- margin-bottom: 4px;
647
- }
648
-
649
- .product-card.layout-2x1 .product-pricing {
650
- margin-bottom: 4px;
651
- }
652
-
653
- .product-card.layout-2x1 .product-name {
654
- font-size: 13px;
655
- }
656
-
657
- .product-card.layout-2x1 .current-price {
658
- font-size: 13px;
659
- }
660
-
661
- /* Grid mode on very small screens */
662
- .product-card.grid-mode {
663
- min-height: 90px;
664
- }
665
-
666
- .product-card.grid-mode .product-image-container {
667
- flex: 0 0 32%;
668
- min-height: 90px;
669
- padding: 6px;
670
- }
671
-
672
- .product-card.grid-mode .product-details {
673
- padding: 8px;
674
- min-height: 90px;
675
- }
676
-
677
- .product-card.grid-mode .product-header {
678
- margin-bottom: 4px;
679
- }
680
-
681
- .product-card.grid-mode .product-pricing {
682
- margin-bottom: 4px;
683
- }
684
-
685
- .product-card.grid-mode .product-name {
686
- font-size: 12px;
687
- }
688
-
689
- .product-card.grid-mode .current-price {
690
- font-size: 12px;
691
- }
692
- }
723
+ .product-card.grid-mode .current-price {
724
+ font-size: 12px;
725
+ }
726
+ }