Home

:root{ --ink:black; --muted:#6b6b6b; --line:#ececec; --sale:#f0ff2e; --best:#3b3933; --green:#00b67a; --green-dark:#00b67a; --card-bg:#f6f6f6; --page-bg:#ffffff; --radius:10px; } *{box-sizing:border-box;} .ptc-carousel-wrap{ position:relative; margin:0 auto; } h2.ptc-section-title{ text-align:center; font-size:clamp(18px, 2.6vw, 24px); font-weight:600; margin:0 0 clamp(18px, 3vw, 28px); letter-spacing:0.2px; } .ptc-carousel-track{ display:flex; gap:clamp(12px, 2vw, 24px); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:8px; -ms-overflow-style:none; scrollbar-width:none; } .ptc-carousel-track::-webkit-scrollbar{display:none;} /* Base: 4 cards visible (desktop) */ .ptc-card{ flex:0 0 calc(25% - 18px); min-width:0; scroll-snap-align:start; display:flex; flex-direction:column; } .ptc-card-media{ position:relative; background:var(--card-bg); border-radius:var(--radius); aspect-ratio:1/1; overflow:hidden; display:flex; align-items:center; justify-content:center; } .ptc-badges{ position:absolute; top:14px; left:14px; display:flex; gap:8px; z-index:2; } .ptc-badge{ font-size:13px; font-weight:400; text-transform:none; padding:6px 10px; border-radius:4px; letter-spacing:0.2px; } .ptc-badge.ptc-sale{ background:var(--sale); color:#1a1a1a; } .ptc-badge.ptc-best{ background:var(--best); color:#fff; } .ptc-product-illustration{ width:60%; height:60%; display:flex; align-items:center; justify-content:center; transition:transform .45s cubic-bezier(.22,1,.36,1); } .ptc-card-media:hover .ptc-product-illustration{ transform:scale(1.04); } .ptc-product-illustration svg{ width:100%; height:100%; } /* --- Hover-reveal Add to Cart --- */ .ptc-add-to-cart{ position:absolute; left:12px; right:12px; bottom:12px; background:var(--green); color:#fff; border:none; border-radius:8px; padding:14px 0; font-size:14px; font-weight:600; cursor:pointer; text-align:center; z-index:3; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .32s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.22,1,.36,1), background .2s ease; } .ptc-card-media:hover .ptc-add-to-cart, .ptc-card-media:focus-within .ptc-add-to-cart, .ptc-card-media.ptc-is-active .ptc-add-to-cart{ opacity:1; transform:translateY(0); pointer-events:auto; } .ptc-add-to-cart:hover{ background:var(--green-dark); } .ptc-card-info{ padding:16px 2px 0; } .ptc-card-title{ font-size:clamp(13px, 1.6vw, 15px); font-weight:600; line-height:1.35; margin:0 0 8px; color:var(--ink); } .ptc-price-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; font-size:clamp(12px, 1.4vw, 14px); } .ptc-price-current{ color:var(--green); font-weight:700; } .ptc-price-original{ color:#b6b6b6; text-decoration:line-through; font-weight:400; } .ptc-price-from{ color:var(--green); font-weight:400; margin-right:-2px; } /* Arrows */ .ptc-nav-btn{ position:absolute; top:calc(50% - 20px); width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:0 4px 14px rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; flex-shrink:0; transition:transform .2s ease, box-shadow .2s ease; } .ptc-nav-btn:hover{ transform:scale(1.06); box-shadow:0 6px 18px rgba(0,0,0,0.12); } .ptc-nav-btn.ptc-prev{ left:6px; } .ptc-nav-btn.ptc-next{ right:6px; } .ptc-nav-btn svg{ width:16px; height:16px; } /* ---------- Responsive breakpoints ---------- */ /* Laptop / small desktop: 3.2 cards */ @media (max-width:1200px){ .ptc-card{ flex:0 0 calc(31.5% - 16px); } } /* Tablet landscape: 3 cards */ @media (max-width:1024px){ .ptc-card{ flex:0 0 calc(33.333% - 16px); } .ptc-carousel-wrap{ padding:0 48px; } } /* Tablet portrait: 2.3 cards */ @media (max-width:860px){ .ptc-card{ flex:0 0 calc(43% - 14px); } .ptc-nav-btn{ width:38px; height:38px; } } /* Large phone / small tablet: ~2 cards */ @media (max-width:640px){ .ptc-card{ flex:0 0 calc(52% - 10px); } .ptc-carousel-wrap{ padding:0 36px; } .ptc-card-title{ font-size:14px; } .ptc-price-row{ font-size:13px; } } /* Phone: ~1.5 cards, so the next one peeks in */ @media (max-width:480px){ .ptc-card{ flex:0 0 68%; } .ptc-carousel-wrap{ padding:0 30px; } .ptc-nav-btn{ width:32px; height:32px; } .ptc-nav-btn svg{ width:14px; height:14px; } h2.ptc-section-title{ margin-bottom:16px; } } /* Small phone: single card, full-bleed feel */ @media (max-width:380px){ .ptc-card{ flex:0 0 84%; } .ptc-carousel-wrap{ padding:0 22px; } .ptc-add-to-cart{ font-size:13px; padding:12px 0; } } @media (prefers-reduced-motion: reduce){ .ptc-add-to-cart, .ptc-product-illustration, .ptc-nav-btn{ transition:none; } } document.addEventListener('DOMContentLoaded', function initPtcCarousel(){ const track = document.getElementById('ptc-track'); if (!track) return; // element not in DOM yet — nothing to attach to function scrollCarousel(dir){ const card = track.querySelector('.ptc-card'); if (!card) return; const gap = parseFloat(getComputedStyle(track).columnGap) || 24; const maxScroll = track.scrollWidth - track.clientWidth; if (maxScroll 0 && track.scrollLeft >= maxScroll - 4){ track.scrollTo({ left: 0, behavior: 'smooth' }); return; } if (dir < 0 && track.scrollLeft <= 4){ track.scrollTo({ left: maxScroll, behavior: 'smooth' }); return; } const amount = (card.getBoundingClientRect().width + gap) * dir; track.scrollBy({ left: amount, behavior: 'smooth' }); } window.scrollCarousel = scrollCarousel; // still exposed in case anything else calls it // Bind arrow clicks in JS rather than inline onclick="" — some hosts/page // builders strip onclick="" attributes from saved HTML even when the // surrounding tag is left alone, which silently breaks the arrows // while autoplay (driven entirely from the script) keeps working fine. track.parentElement.querySelectorAll('.ptc-nav-btn[data-ptc-dir]').forEach(btn => { btn.addEventListener('click', () => { scrollCarousel(parseInt(btn.getAttribute('data-ptc-dir'), 10)); }); }); // --- Autoplay: advances automatically, loops back to the start, // and pauses while the user is interacting with the carousel --- const AUTOPLAY_DELAY = 3500; let autoplayTimer = null; function startAutoplay(){ stopAutoplay(); autoplayTimer = setInterval(() => scrollCarousel(1), AUTOPLAY_DELAY); } function stopAutoplay(){ if (autoplayTimer) clearInterval(autoplayTimer); } function pauseThenResume(){ stopAutoplay(); clearTimeout(pauseThenResume._t); pauseThenResume._t = setTimeout(startAutoplay, AUTOPLAY_DELAY); } ['mouseenter', 'touchstart', 'focusin'].forEach(evt =>track.addEventListener(evt, stopAutoplay, { passive: true }) ); ['mouseleave', 'touchend', 'focusout'].forEach(evt =>track.addEventListener(evt, pauseThenResume, { passive: true }) ); track.parentElement.querySelectorAll('.ptc-nav-btn').forEach(btn =>btn.addEventListener('click', pauseThenResume) ); // Give Elementor's layout/animation pass a moment to finish before the // first autoplay tick, so scrollWidth/clientWidth are already correct setTimeout(startAutoplay, 300); // Touch devices have no hover state, so the first tap on a product // reveals the button (same animation as desktop hover); tapping // elsewhere hides it again. A tap directly on the button still works // immediately once revealed. const isTouch = window.matchMedia('(hover: none)').matches; if (isTouch){ track.querySelectorAll('.ptc-card-media').forEach(media => { media.addEventListener('click', (e) => { const alreadyActive = media.classList.contains('ptc-is-active'); const tappedButton = e.target.closest('.ptc-add-to-cart'); if (tappedButton && alreadyActive) return; // let the button click through track.querySelectorAll('.ptc-card-media.ptc-is-active').forEach(m => { if (m !== media) m.classList.remove('ptc-is-active'); }); if (!alreadyActive){ e.preventDefault(); media.classList.add('ptc-is-active'); } }); }); document.addEventListener('click', (e) => { if (!e.target.closest('.ptc-card-media')){ track.querySelectorAll('.ptc-card-media.ptc-is-active').forEach(m => m.classList.remove('ptc-is-active')); } }); } });