(() => { const GALLERY_ROOT_SELECTOR = '.gallery-grid'; const POST_FEED_ROOT_SELECTOR = '#post-feed-list, .post-feed-list'; const MOBILE_BREAKPOINT = 680; function parsePx(raw, fallback) { const text = String(raw ?? '').trim(); if (!text || text.includes('%')) return fallback; const value = parseFloat(text); return Number.isFinite(value) && value >= 0 ? value : fallback; } function parseCount(raw, fallback) { const value = parseInt(String(raw ?? '').trim(), 10); return Number.isFinite(value) && value > 0 ? value : fallback; } function readRootStyles() { return window.getComputedStyle(document.documentElement); } function getAvailableWidth(root, options = {}) { const source = root.parentElement || root; const rectWidth = Math.ceil(source.getBoundingClientRect().width); const clientWidth = source.clientWidth || 0; const rawWidth = Math.max(clientWidth, rectWidth); const offset = options.subtractMenuOffset ? parsePx(readRootStyles().getPropertyValue('--starter-window-menu-offset'), 0) : 0; return Math.max(0, rawWidth - offset); } function readContainerAlignment() { const styles = readRootStyles(); return { start: (styles.getPropertyValue('--starter-container-margin-inline-start') || '').trim() || 'auto', end: (styles.getPropertyValue('--starter-container-margin-inline-end') || '').trim() || 'auto', }; } function setStyle(el, property, value) { if (value === '') { el.style.removeProperty(property); return; } if (el.style.getPropertyValue(property) !== value) { el.style.setProperty(property, value); } } function resolveResponsiveColumns(options) { const { availableWidth, preferredWidth, gap, maxColumns, } = options; if (!(availableWidth > 0)) return null; const safeGap = gap > 0 ? gap : 0; const safeColumns = Math.max(1, maxColumns || 1); if (availableWidth <= MOBILE_BREAKPOINT) { return { columnCount: 1, rootWidth: '100%', itemWidth: '100%', columnWidth: 'auto', }; } if (preferredWidth > 0) { if (preferredWidth >= availableWidth) { return { columnCount: 1, rootWidth: '100%', itemWidth: '100%', columnWidth: 'auto', }; } const fitColumns = Math.floor((availableWidth + safeGap) / (preferredWidth + safeGap)); const columnCount = Math.max(1, Math.min(safeColumns, fitColumns)); const fittedWidth = Math.min( availableWidth, columnCount * preferredWidth + Math.max(0, columnCount - 1) * safeGap, ); return { columnCount, rootWidth: `${fittedWidth}px`, itemWidth: `${preferredWidth}px`, columnWidth: `${preferredWidth}px`, }; } const columnCount = safeColumns; const computedItemWidth = Math.floor( Math.max(0, availableWidth - Math.max(0, columnCount - 1) * safeGap) / columnCount, ); if (!(computedItemWidth > 0)) { return { columnCount: 1, rootWidth: '100%', itemWidth: '100%', columnWidth: 'auto', }; } return { columnCount, rootWidth: '100%', itemWidth: `${computedItemWidth}px`, columnWidth: `${computedItemWidth}px`, }; } function readGalleryMetrics(root) { const rootStyles = readRootStyles(); const rootStylesForGap = window.getComputedStyle(root); const preferredWidth = parsePx(rootStyles.getPropertyValue('--starter-global-gallery-width'), 1120); const gap = parsePx( rootStyles.getPropertyValue('--starter-global-gallery-gap') || rootStylesForGap.columnGap || rootStylesForGap.gap, 16, ); const maxColumns = parseCount(rootStyles.getPropertyValue('--starter-global-gallery-columns'), 1); return { preferredWidth, gap, maxColumns }; } function readPostFeedMetrics(root) { const rootStyles = readRootStyles(); const rootStylesForGap = window.getComputedStyle(root); const preferredWidth = parsePx(rootStyles.getPropertyValue('--starter-global-post-width'), 0); const gap = parsePx( rootStyles.getPropertyValue('--starter-global-post-feed-gap') || rootStylesForGap.columnGap || rootStylesForGap.gap, 16, ); const maxColumns = parseCount(rootStyles.getPropertyValue('--starter-global-post-feed-columns'), 1); return { preferredWidth, gap, maxColumns }; } function applyRootAlignment(root) { const alignment = readContainerAlignment(); setStyle(root, 'margin-left', alignment.start); setStyle(root, 'margin-right', alignment.end); } function applyGalleryLayout(root) { const availableWidth = getAvailableWidth(root); const { preferredWidth, gap, maxColumns } = readGalleryMetrics(root); const layout = resolveResponsiveColumns({ availableWidth, preferredWidth, gap, maxColumns }); if (!layout) return; applyRootAlignment(root); setStyle(root, 'width', layout.rootWidth); setStyle(root, 'max-width', layout.rootWidth); setStyle(root, 'column-count', String(layout.columnCount)); setStyle(root, 'column-width', layout.columnWidth); root.dataset.galleryColumns = String(layout.columnCount); } function applyPostFeedLayout(root) { const availableWidth = getAvailableWidth(root); const { preferredWidth, gap, maxColumns } = readPostFeedMetrics(root); const layout = resolveResponsiveColumns({ availableWidth, preferredWidth: maxColumns >= 2 ? 0 : preferredWidth, gap, maxColumns }); /* tc-fill-feed-v2 */ if (!layout) return; applyRootAlignment(root); setStyle(root, 'width', layout.rootWidth); setStyle(root, 'max-width', layout.rootWidth); setStyle(root, '--starter-post-feed-item-width', layout.itemWidth); root.dataset.postFeedColumns = String(layout.columnCount); } function bindRoot(root, options) { if (!(root instanceof HTMLElement)) return; if (root.dataset[options.boundKey] === '1') return; root.dataset[options.boundKey] = '1'; let frame = 0; let cleaned = false; let resizeObserver = null; const cleanup = () => { if (cleaned) return; cleaned = true; if (frame) window.cancelAnimationFrame(frame); resizeObserver?.disconnect(); window.removeEventListener('resize', schedule); delete root.dataset[options.boundKey]; delete root.dataset[options.columnsKey]; root.style.removeProperty('width'); root.style.removeProperty('max-width'); root.style.removeProperty('margin-left'); root.style.removeProperty('margin-right'); for (const property of options.resetProperties) { root.style.removeProperty(property); } }; const schedule = () => { if (!root.isConnected) { cleanup(); return; } if (frame) window.cancelAnimationFrame(frame); frame = window.requestAnimationFrame(() => { frame = 0; options.apply(root); }); }; resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => schedule()) : null; resizeObserver?.observe(root.parentElement || root); window.addEventListener('resize', schedule, { passive: true }); schedule(); } function scan() { for (const root of Array.from(document.querySelectorAll(GALLERY_ROOT_SELECTOR))) { bindRoot(root, { boundKey: 'galleryLayoutBound', columnsKey: 'galleryColumns', resetProperties: ['column-count', 'column-width'], apply: applyGalleryLayout, }); } for (const root of Array.from(document.querySelectorAll(POST_FEED_ROOT_SELECTOR))) { bindRoot(root, { boundKey: 'postFeedLayoutBound', columnsKey: 'postFeedColumns', resetProperties: ['--starter-post-feed-item-width'], apply: applyPostFeedLayout, }); } } function observeMutations() { if (window.__tcStarterLayoutObserver) return; let frame = 0; const schedule = () => { if (frame) window.cancelAnimationFrame(frame); frame = window.requestAnimationFrame(() => { frame = 0; scan(); }); }; const observer = new MutationObserver(() => schedule()); observer.observe(document.documentElement, { childList: true, subtree: true }); window.__tcStarterLayoutObserver = observer; } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { scan(); observeMutations(); }, { once: true }); } else { scan(); observeMutations(); } window.addEventListener('load', scan, { once: true }); })(); /* tc-nav-outside-close-v1 */ ;(function(){if(window.__tcNavOutsideClose)return;window.__tcNavOutsideClose=1;document.addEventListener('click',function(e){if(e.target.closest('.site-nav-group'))return;var open=document.querySelectorAll('.site-nav-group.is-open');for(var i=0;i=todayKey;})[0]||sorted[0];var vy,vm;if(ff){vy=parseInt(ff.slice(0,4),10);vm=parseInt(ff.slice(5,7),10)-1;}else{vy=now.getFullYear();vm=now.getMonth();}function render(){var startDow=new Date(vy,vm,1).getDay();var days=new Date(vy,vm+1,0).getDate();var h='

'+MON[vm]+' '+vy+'

';['S','M','T','W','T','F','S'].forEach(function(d){h+=''+d+'';});for(var i=0;i';}for(var d=1;d<=days;d++){var key=vy+'-'+p(vm+1)+'-'+p(d);if(have[key]){h+=''+d+'';}else{h+=''+d+'';}}h+='

';box.innerHTML=h;box.querySelector('[data-cal-prev]').onclick=function(){vm--;if(vm<0){vm=11;vy--;}render();};box.querySelector('[data-cal-next]').onclick=function(){vm++;if(vm>11){vm=0;vy++;}render();};}render();if(btn){btn.onclick=function(){if(box.hasAttribute('hidden')){box.removeAttribute('hidden');btn.setAttribute('aria-expanded','true');}else{box.setAttribute('hidden','');btn.setAttribute('aria-expanded','false');}};}var qd=new URLSearchParams(location.search).get('date');if(qd){box.removeAttribute('hidden');if(btn){btn.setAttribute('aria-expanded','true');}var card=document.querySelector('[data-event-date^="'+qd+'"]');if(card){card.classList.add('event-card--active');setTimeout(function(){card.scrollIntoView({behavior:'smooth',block:'center'});},150);}}}if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',init);}else{init();}window.addEventListener('load',init);})(); /*TC_CALENDAR_WIDGET_END*/ /* TC_VIDEO_POSTER */ (function(){ function ytId(src){ try{ var u=new URL(src); if(u.hostname.indexOf('youtube')>=0 && u.searchParams.get('v')) return u.searchParams.get('v'); if(u.hostname==='youtu.be') return u.pathname.split('/').filter(Boolean).pop(); if(u.hostname.indexOf('youtube')>=0 && u.pathname.indexOf('/embed/')===0) return u.pathname.split('/').filter(Boolean).pop(); }catch(e){} return ''; } function poster(src){ var id=ytId(src); if(id) return 'https://i.ytimg.com/vi/'+id+'/hqdefault.jpg'; return ''; // direct-MP4 + Vimeo: no remote thumbnail (use black bg) } function wrapVideo(node){ if(node.dataset.tcWrapped==='1') return; var feed=node.closest('#post-feed-list,.post-feed-list'); if(!feed) return; node.dataset.tcWrapped='1'; var src=''; if(node.tagName==='IFRAME'){ src=node.getAttribute('src')||node.getAttribute('data-src')||''; } else if(node.tagName==='VIDEO'){ var s=node.querySelector('source'); src=(s&&s.getAttribute('src'))||node.getAttribute('src')||''; node.removeAttribute('controls'); node.muted=true; node.setAttribute('playsinline',''); node.preload='none'; } var wrap=document.createElement('div'); wrap.className='tc-video-wrap'; var parent=node.parentNode; parent.insertBefore(wrap,node); // For iframe: stash the real src + replace with about:blank so embed doesn't load. var realSrc=''; if(node.tagName==='IFRAME'){ realSrc=src; node.setAttribute('data-tc-src',src); node.setAttribute('src','about:blank'); } wrap.appendChild(node); var p=poster(src); if(p){ var img=new Image(); img.className='tc-video-poster'; img.alt=''; img.loading='lazy'; img.src=p; wrap.appendChild(img); } var btn=document.createElement('button'); btn.type='button'; btn.className='tc-video-play'; btn.setAttribute('aria-label','Play video'); wrap.appendChild(btn); btn.addEventListener('click',function(ev){ ev.preventDefault(); ev.stopPropagation(); if(node.tagName==='VIDEO'){ node.setAttribute('controls',''); node.muted=false; var pr=node.play(); if(pr&&pr.catch) pr.catch(function(){}); } else if(node.tagName==='IFRAME'){ var s=node.getAttribute('data-tc-src')||realSrc; // auto-play hint for YT / Vimeo if(/youtube|youtu\.be/.test(s)) s=s+(s.indexOf('?')>=0?'&':'?')+'autoplay=1'; else if(/vimeo/.test(s)) s=s+(s.indexOf('?')>=0?'&':'?')+'autoplay=1'; node.setAttribute('src',s); } wrap.classList.add('is-playing'); }); if(node.tagName==='VIDEO'){ node.addEventListener('pause',function(){ wrap.classList.remove('is-playing'); }); node.addEventListener('ended',function(){ wrap.classList.remove('is-playing'); }); } } function init(){ document.querySelectorAll('#post-feed-list video.post-video-player, .post-feed-list video.post-video-player').forEach(wrapVideo); document.querySelectorAll('#post-feed-list iframe.post-video-player, .post-feed-list iframe.post-video-player').forEach(wrapVideo); // Also catch iframes wrapped by the engine in .video-embed document.querySelectorAll('#post-feed-list .video-embed iframe, .post-feed-list .video-embed iframe').forEach(wrapVideo); } if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',init); else init(); })(); /* TC_VIDEO_POSTER_END */ /* TC_FILE_UPLOAD */ ;(function(){ if(window.__tcFileUpload)return; window.__tcFileUpload=1; function enhance(input){ if(input.getAttribute('data-tc-fenh'))return; input.setAttribute('data-tc-fenh','1'); var label=document.createElement('label'); label.className='tc-file-drop'; var inner=document.createElement('span'); inner.className='tc-file-drop-inner'; inner.innerHTML='Upload a file'; var parent=input.parentNode; if(!parent)return; parent.insertBefore(label,input); label.appendChild(input); label.appendChild(inner); var nameEl=inner.querySelector('.tc-file-name'); var textEl=inner.querySelector('.tc-file-text'); input.addEventListener('change',function(){ if(input.files&&input.files.length){ nameEl.textContent=input.files[0].name; textEl.textContent='Change file'; label.classList.add('has-file'); } else{ nameEl.textContent=''; textEl.textContent='Upload a file'; label.classList.remove('has-file'); } }); } function scan(){ var els=document.querySelectorAll('.tc-input[type="file"]'); for(var i=0;i

QA Mockup Kit — separate files per option

Sizing & Care

Related products

Collage product 2

Collage product 6

Collage product 8