/* ── Carousel wrap ── */ .ts-carousel-wrap, .ts-car-outer { position: relative; } .ts-car-outer { overflow: hidden; } .ts-car-track { display: flex; gap: 16px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .ts-car-slide { flex: 0 0 calc(25% - 12px); min-width: 0; } /* ── Arrow buttons ── */ .ts-car-btn { position: absolute; top: 50%; transform: translateY(-50%); background: #2b3a4a; color: #fff; border: none; width: 42px; height: 42px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; font-size: 18px; transition: background 0.2s; border-radius: 0; flex-shrink: 0; } .ts-car-btn:hover { background: #3d5166; } .ts-car-prev { left: -21px; } .ts-car-next { right: -21px; } /* ── Product card ── */ .ts-prod-card { background: #fff; border: 1px solid rgba(43,58,74,0.12); overflow: hidden; position: relative; transition: box-shadow 0.25s, transform 0.25s; height: 100%; } .ts-prod-card:hover { box-shadow: 0 8px 32px rgba(43,58,74,0.12); transform: translateY(-3px); } /* Badge */ .ts-prod-badge { position: absolute; top: 12px; left: 12px; background: #2b3a4a; color: #fff; font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; z-index: 2; } .ts-prod-badge.gold { background: #b8974a; } /* Image area */ .ts-prod-img { width: 100%; aspect-ratio: 1; background: #e8e4d9; display: flex; align-items: center; justify-content: center; font-size: 64px; overflow: hidden; } .ts-prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .ts-prod-card:hover .ts-prod-img img { transform: scale(1.04); } /* Meta */ .ts-prod-meta { padding: 14px 14px 16px; } .ts-prod-name { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 600; color: #2b3a4a; margin-bottom: 4px; line-height: 1.3; } .ts-prod-sku { font-family: 'Jost', sans-serif; font-size: 11px; color: #8a8a8a; letter-spacing: 0.3px; margin-bottom: 8px; } .ts-prod-colors { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; } .ts-prod-colors span { width: 14px; height: 14px; border-radius: 50%; display: inline-block; } .ts-prod-price { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 15px; color: #2b3a4a; margin-bottom: 10px; } .ts-prod-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; background: #2b3a4a; color: #fff; border: none; padding: 10px; font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; text-decoration: none !important; transition: background 0.2s; } .ts-prod-btn:hover { background: #3d5166; color: #fff; } /* ── Responsive carousel ── */ @media (max-width: 1100px) { .ts-car-slide { flex: 0 0 calc(33.333% - 11px); } } @media (max-width: 768px) { .ts-car-slide { flex: 0 0 calc(50% - 8px); } .ts-car-prev { left: -14px; } .ts-car-next { right: -14px; } .ts-car-btn { width: 34px; height: 34px; font-size: 15px; } } @media (max-width: 480px) { .ts-car-slide { flex: 0 0 calc(100%); } } if (!window.tsSlideInit) { window.tsSlideInit = true; window.tsPos = {}; window.tsSlide = function(id, dir) { var track = document.getElementById(id); if (!track) return; var slide = track.querySelector('.ts-car-slide'); if (!slide) return; var style = window.getComputedStyle(track); var gap = parseInt(style.gap || style.columnGap || '16', 10); var w = slide.offsetWidth + gap; var total = track.children.length; var outer = track.parentElement; var visible = Math.round(outer.offsetWidth / w) || 1; var max = Math.max(0, total - visible); if (!window.tsPos[id]) window.tsPos[id] = 0; window.tsPos[id] = Math.max(0, Math.min(max, window.tsPos[id] + dir)); track.style.transform = 'translateX(-' + (window.tsPos[id] * w) + 'px)'; }; }