/* Shared product card styles (x-product-card) */ .product-card { background: #fff; border-radius: 12px; overflow: hidden; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid #f0f0f0; position: relative; cursor: pointer; } .product-card:hover { transform: translateY(-6px); box-shadow: 0 10px 25px rgba(30, 64, 175, 0.15); border-color: #1e40af; } .product-badge { position: absolute; top: 8px; left: 8px; background: #1e40af; color: #fff; font-size: 9px; font-weight: 800; padding: 4px 10px; border-radius: 20px; z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 4px; } .product-badge.hot { background: linear-gradient(135deg, #ef4444, #dc2626); } .product-badge.new { background: linear-gradient(135deg, #22c55e, #16a34a); } .product-badge.verified { background: linear-gradient(135deg, #3b82f6, #2563eb); } .product-image { height: 190px; background: linear-gradient(135deg, #f8f9fa, #e9ecef); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .product-image::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(to top, rgba(0,0,0,0.05), transparent); } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .product-card:hover .product-image img { transform: scale(1.08); } .product-image img.img-primary { position: relative; z-index: 1; } .product-image img.img-hover { position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; transition: opacity 0.3s ease, transform 0.4s; } .product-card:hover .product-image img.img-hover { opacity: 1; } /* Several pictures (Admin > Product Card Pictures): "slide" and "strip" */ .product-image.pc-gallery::after { pointer-events: none; z-index: 2; } .product-card:hover .product-image.pc-gallery img { transform: none; } .pc-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .pc-track::-webkit-scrollbar { display: none; } .pc-track img { flex: 0 0 100%; scroll-snap-align: start; } .pc-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.92); color: #111827; box-shadow: 0 1px 4px rgba(0,0,0,0.25); font-size: 11px; display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .pc-prev { left: 6px; } .pc-next { right: 6px; } .pc-nav:focus-visible { display: flex; outline: 2px solid #111827; outline-offset: 1px; } @media (hover: hover) { .pc-gallery:hover .pc-nav { display: flex; } } .pc-marks { position: absolute; left: 8px; right: 8px; bottom: 6px; z-index: 3; display: flex; justify-content: center; gap: 4px; pointer-events: none; } .pc-marks span { width: 6px; height: 6px; border-radius: 50%; background: rgba(17,24,39,0.25); box-shadow: 0 0 0 1px rgba(255,255,255,0.7); } .pc-marks span.on { background: #111827; } .pc-strip { touch-action: pan-y; } .pc-strip > img { position: absolute; top: 0; left: 0; opacity: 0; } .pc-strip > img.on { opacity: 1; } .pc-marks.pc-bars { gap: 3px; } .pc-bars span { flex: 1; width: auto; height: 3px; border-radius: 2px; } .product-extra { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .extra-item { font-size: 10px; color: #6b7280; background: #f3f4f6; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 3px; } .extra-item i { font-size: 9px; color: #9ca3af; } .product-wishlist { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 3; } .product-wishlist:hover { background: #ef4444; color: #fff; transform: scale(1.1); } .product-wishlist i { font-size: 12px; color: #999; } .product-wishlist:hover i { color: #fff; } .product-info { padding: 10px; } .product-name { font-size: 14px; font-weight: 400; color: #374151; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; min-height: 34px; } .product-supplier { font-size: 12px; color: #6b7280; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; font-weight: 400; } .product-supplier i { color: #6b7280; font-size: 11px; } .product-supplier .supplier-link { color: #374151; text-decoration: none; font-weight: 400; transition: color 0.2s; } .product-supplier .supplier-link:hover { color: #1f2937; text-decoration: underline; } .product-rating { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; } .rating-stars-display { display: flex; gap: 1px; } .rating-stars-display i { color: #fbbf24; font-size: 10px; } .rating-stars-display i.empty { color: #e5e7eb; } .rating-count-text { font-size: 10px; color: #999; font-weight: 500; } .product-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; } .price-value { font-size: 17px; font-weight: 700; color: #111827; } .price-unit { font-size: 11px; color: #999; } .product-stats { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid #f5f5f5; margin-bottom: 6px; } .pstat-item { text-align: center; flex: 1; position: relative; } .pstat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 20px; width: 1px; background: #e8e8e8; } .pstat-value { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 1px; } .pstat-label { font-size: 8px; color: #999; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .product-footer { display: flex; gap: 6px; padding-top: 4px; } .product-btn { flex: 1; padding: 8px 4px; font-size: 11px; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; transition: all 0.25s; display: flex; align-items: center; justify-content: center; gap: 4px; text-decoration: none; } .product-btn.primary { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; border: none; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2); } .product-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3); } .product-btn:not(.primary) { background: #fff; color: #374151; border: 1px solid #374151; } .product-btn:not(.primary):hover { background: #f3f4f6; transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); } .product-btn i { font-size: 10px; } .product-image .no-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .product-image .no-image i { font-size: 40px; color: #cbd5e1; } .product-price .price-contact { font-size: 14px; font-weight: 700; color: #111827; }

No products found

Try adjusting your filters or search criteria