@import url(‘https://fonts.bunny.net/css?family=syne:400,600,700,800|dm-sans:300,400,500,600&display=swap’);

.tp-collection,
.tp-collection * {
box-sizing: border-box;
}

.tp-collection {
–bg: #f5f4f0;
–ink: #0b1220;
–ink60: rgba(11,18,32,0.6);
–ink45: rgba(11,18,32,0.45);
–ink12: rgba(11,18,32,0.12);
–white: #ffffff;
–accent: #0b0b10;
–pill-active-bg: #0b0b10;
–pill-active-color: #fff;
–card-radius: 22px;
background: var(–bg);
color: var(–ink);
-webkit-font-smoothing: antialiased;
position: relative;
z-index: 2;
}

.tp-collection__container {
max-width: 1260px;
margin: 0 auto;
padding: 52px 36px 80px;
}

.tp-collection__header {
margin-bottom: 32px;
}

.tp-collection__titlewrap {
margin-bottom: 24px;
}

.tp-collection__title {
font-family: inter, sans-serif;
font-size: 52px;
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 800;
color: var(–ink);
margin: 0 0 10px;
}

.tp-collection__subtitle {
font-size: 16px;
color: var(–ink60);
font-weight: 400;
max-width: 500px;
margin: 0;
}

.tp-collection__controls {
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: center;
margin-bottom: 18px;
}

.tp-collection__search {
position: relative;
display: flex;
align-items: center;
height: 52px;
border-radius: 999px;
border: 1px solid var(–ink12);
background: var(–white);
padding: 0 18px 0 48px;
transition: border-color 0.2s;
}

.tp-collection__search:focus-within {
border-color: var(–ink);
}

.tp-collection__searchicon {
position: absolute;
left: 18px;
display: inline-flex;
opacity: 0.45;
}

.tp-collection__searchinput {
width: 100%;
border: 0;
outline: 0;
background: transparent;
font-size: 15px;
font-family: inter, sans-serif;
color: var(–ink);
padding: 0;
box-shadow: none;
}

.tp-collection__searchinput::placeholder {
color: var(–ink45);
}

.tp-collection__sort {
display: flex;
align-items: center;
gap: 12px;
white-space: nowrap;
}

.tp-collection__sortlabel {
font-size: 13px;
color: var(–ink45);
margin: 0;
}

.tp-collection__selectwrap {
position: relative;
height: 44px;
display: inline-flex;
align-items: center;
}

.tp-collection__select {
appearance: none;
-webkit-appearance: none;
border: 1px solid var(–ink12);
background: var(–white);
height: 44px;
border-radius: 999px;
padding: 0 44px 0 18px;
font-size: 14px;
font-family: inter, sans-serif;
color: var(–ink);
outline: 0;
cursor: pointer;
transition: border-color 0.2s;
}

.tp-collection__select:focus {
border-color: var(–ink);
}

.tp-collection__chev {
position: absolute;
right: 14px;
pointer-events: none;
opacity: 0.45;
display: inline-flex;
}

.tp-collection__pills {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 4px;
}

.tp-pill {
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
padding: 0 18px;
border-radius: 999px;
background: var(–white);
border: 1px solid var(–ink12);
color: var(–ink60);
text-decoration: none;
font-size: 13px;
font-family: inter, sans-serif;
font-weight: 600;
cursor: pointer;
transition: background 0.18s, color 0.18s, border-color 0.18s;
white-space: nowrap;
}

.tp-pill:hover,
.tp-pill.is-active {
background: var(–pill-active-bg);
color: var(–pill-active-color);
border-color: var(–pill-active-bg);
}

.tp-count {
font-size: 13px;
color: var(–ink45);
margin-bottom: 4px;
}

.tp-grid {
display: grid;
gap: 24px;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 24px;
min-height: 200px;
}

.tp-card {
border-radius: var(–card-radius);
background: var(–white);
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
text-decoration: none;
color: inherit;
transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
animation: tpCardIn 0.4s ease both;
}

@keyframes tpCardIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}

.tp-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(11,18,32,0.10);
}

.tp-card__media {
position: relative;
padding: 26px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background: var(–tp-bg, #e9eef4);
overflow: hidden;
}

.tp-card__img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 14px 24px rgba(0,0,0,0.13));
transition: transform 0.3s ease;
}

.tp-card:hover .tp-card__img {
transform: scale(1.04);
}

.tp-card__badge {
position: absolute;
top: 14px;
left: 14px;
background: var(–accent);
color: #fff;
font-size: 11px;
font-weight: 700;
font-family: inter, sans-serif;
letter-spacing: 0.04em;
padding: 4px 10px;
border-radius: 999px;
text-transform: uppercase;
}

.tp-card__body {
padding: 18px 18px 16px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}

.tp-card__row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
}

.tp-card__title {
font-family: inter, sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(–ink);
line-height: 1.3;
margin: 0;
}

.tp-card__pricewrap {
text-align: right;
line-height: 1.15;
flex-shrink: 0;
}

.tp-card__from {
font-size: 11px;
color: var(–ink45);
display: block;
}

.tp-card__price {
font-family: inter, sans-serif;
font-size: 20px;
font-weight: 800;
color: var(–ink);
}

.tp-card__price–sale {
color: #c0392b;
}

.tp-card__price–original {
font-size: 13px;
font-weight: 400;
color: var(–ink45);
text-decoration: line-through;
margin-left: 4px;
}

.tp-card__meta {
font-size: 13px;
color: var(–ink45);
margin: 0;
}

.tp-card__btn {
margin-top: auto;
height: 46px;
border-radius: 999px;
background: var(–accent);
color: #fff;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: inter, sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: -0.01em;
border: none;
cursor: pointer;
transition: opacity 0.15s, transform 0.15s;
}

.tp-card__btn:hover {
opacity: 0.85;
transform: scale(0.98);
color: #fff;
}

.tp-empty {
grid-column: 1 / -1;
text-align: center;
padding: 80px 20px;
color: var(–ink45);
font-size: 15px;
}

.tp-loading {
grid-column: 1 / -1;
display: flex;
justify-content: center;
align-items: center;
padding: 80px 20px;
gap: 8px;
}

.tp-loading__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(–ink);
opacity: 0.3;
animation: tpDotPulse 1.2s ease-in-out infinite;
}

.tp-loading__dot:nth-child(2) { animation-delay: 0.2s; }
.tp-loading__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes tpDotPulse {
0%, 80%, 100% { opacity: 0.15; transform: scale(0.85); }
40% { opacity: 1; transform: scale(1); }
}

.tp-pagination {
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}

.tp-pagination__btn {
height: 40px;
min-width: 40px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid var(–ink12);
background: var(–white);
color: var(–ink);
font-size: 14px;
font-family: inter, sans-serif;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
display: inline-flex;
align-items: center;
justify-content: center;
}

.tp-pagination__btn:hover:not(:disabled) {
background: var(–ink);
color: #fff;
border-color: var(–ink);
}

.tp-pagination__btn.is-active {
background: var(–ink);
color: #fff;
border-color: var(–ink);
font-weight: 700;
}

.tp-pagination__btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}

@media (max-width: 1024px) {
.tp-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media (max-width: 768px) {
.tp-collection__container {
padding: 36px 20px 60px;
}

.tp-collection__title {
font-size: 38px;
}

.tp-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}

.tp-collection__controls {
grid-template-columns: 1fr;
}

.tp-collection__pills {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}

.tp-pill {
flex: 0 0 auto;
}

.tp-card__row {
flex-direction: column;
align-items: flex-start;
}

.tp-card__pricewrap {
text-align: left;
}
}

@media (max-width: 480px) {
.tp-collection__title {
font-size: 30px;
}

.tp-card__media {
height: 220px;
}
}

(function () {
var BASE_URL = window.location.origin;
var PER_PAGE = 24;
var TITLE_PREFIX = ‘krilos’;

var state = {
page: 1,
totalPages: 1,
totalItems: 0,
sort: ‘menu_order’,
category: ”,
search: ”
};

var grid = document.getElementById(‘tpGrid’);
var pagination = document.getElementById(‘tpPagination’);
var searchInput = document.getElementById(‘tpSearch’);
var sortSelect = document.getElementById(‘tpSort’);
var pillsWrap = document.getElementById(‘tpPills’);
var countEl = document.getElementById(‘tpCount’);

if (!grid || !pagination || !searchInput || !sortSelect || !pillsWrap || !countEl) {
return;
}

function apiFetch(path) {
return fetch(BASE_URL + path, {
credentials: ‘same-origin’
}).then(function (r) {
if (!r.ok) {
throw new Error(‘API error ‘ + r.status);
}
return r.json();
});
}

function escapeHtml(str) {
return String(str || ”)
.replace(/&/g, ‘&’)
.replace(//g, ‘>’)
.replace(/”/g, ‘"’)
.replace(/’/g, ‘'’);
}

function stripHtml(str) {
var div = document.createElement(‘div’);
div.innerHTML = str || ”;
return (div.textContent || div.innerText || ”).trim();
}

function formatPrice(value, currencyCode) {
var num = parseFloat(value || 0);
if (Number.isNaN(num)) num = 0;

try {<br />
  return new Intl.NumberFormat(&#8216;en-US&#8217;, {<br />
    style: &#8216;currency&#8217;,<br />
    currency: currencyCode || &#8216;USD&#8217;<br />
  }).format(num);<br />
} catch (e) {<br />
  return &#8216;$&#8217; + num.toFixed(2);<br />
}<br />

}

function cardBg(i) {
var colors = [‘#e9eef4’, ‘#f0ece8’, ‘#e8f0ec’, ‘#ece8f0’, ‘#f0f0e8’, ‘#e8ecf0’];
return colors[i % colors.length];
}

function getProductPriceHtml(product) {
var prices = product.prices || {};
var currencyCode = prices.currency_code || ‘USD’;
var price = prices.price ? Number(prices.price) / 100 : 0;
var regularPrice = prices.regular_price ? Number(prices.regular_price) / 100 : 0;
var isOnSale = regularPrice > price && regularPrice > 0;

if (product.type === &#8216;variable&#8217;) {<br />
  return &#8216;<span class="tp-card__from">from</span><span class="tp-card__price">&#8216; + escapeHtml(formatPrice(price, currencyCode)) + &#8216;</span>&#8216;;<br />
}

if (isOnSale) {<br />
  return &#8216;<span class="tp-card__price tp-card__price--sale">&#8216; + escapeHtml(formatPrice(price, currencyCode)) + &#8216;</span><span class="tp-card__price--original">&#8216; + escapeHtml(formatPrice(regularPrice, currencyCode)) + &#8216;</span>&#8216;;<br />
}

return &#8216;<span class="tp-card__price">&#8216; + escapeHtml(formatPrice(price, currencyCode)) + &#8216;</span>&#8216;;<br />

}

function renderPills(products) {
var seen = {};
var categoryMap = [];

products.forEach(function (product) {<br />
  (product.categories || []).forEach(function (cat) {<br />
    if (!cat || !cat.slug || seen[cat.slug]) return;<br />
    if (cat.slug === &#8216;uncategorized&#8217;) return;<br />
    seen[cat.slug] = true;<br />
    categoryMap.push(cat);<br />
  });<br />
});

pillsWrap.innerHTML = &#8221;;

var allBtn = document.createElement(&#8216;button&#8217;);<br />
allBtn.className = &#8216;tp-pill&#8217; + (!state.category ? &#8216; is-active&#8217; : &#8221;);<br />
allBtn.textContent = &#8216;All&#8217;;<br />
allBtn.setAttribute(&#8216;data-cat&#8217;, &#8221;);<br />
pillsWrap.appendChild(allBtn);

categoryMap.forEach(function (cat) {<br />
  var btn = document.createElement(&#8216;button&#8217;);<br />
  btn.className = &#8216;tp-pill&#8217; + (state.category === cat.slug ? &#8216; is-active&#8217; : &#8221;);<br />
  btn.textContent = cat.name;<br />
  btn.setAttribute(&#8216;data-cat&#8217;, cat.slug);<br />
  pillsWrap.appendChild(btn);<br />
});<br />

}

function renderProducts(products) {
if (!products.length) {
grid.innerHTML = ‘

‘;
return;
}

grid.innerHTML = ”;

products.forEach(function (product, i) {<br />
  var img = &#8221;;<br />
  if (product.images &amp;&amp; product.images.length &amp;&amp; product.images[0].src) {<br />
    img = product.images[0].src;<br />
  }

  var rawDesc = stripHtml(product.short_description || &#8221;);<br />
  var shortDesc = rawDesc ? rawDesc.substring(0, 60) : &#8221;;<br />
  var permalink = product.permalink || &#8216;#&#8217;;<br />
  var badge = product.on_sale ? &#8216;<span class="tp-card__badge">Sale</span>&#8216; : &#8221;;

  var article = document.createElement(&#8216;a&#8217;);<br />
  article.className = &#8216;tp-card&#8217;;<br />
  article.href = permalink;<br />
  article.style.animationDelay = (i * 40) + &#8216;ms&#8217;;

  article.innerHTML =<br />
    &#8216;

‘ +
(img ? ‘‘ : ”) +
badge +
‘

‘ +
‘

‘;

grid.appendChild(article);
});
}

function renderPagination() {
pagination.innerHTML = ”;
if (state.totalPages <= 1) return;

var prevBtn = document.createElement('button');
prevBtn.className = 'tp-pagination__btn';
prevBtn.textContent = '← Prev';
prevBtn.disabled = state.page <= 1;
prevBtn.addEventListener('click', function () {
state.page–;
loadProducts();
scrollToTop();
});
pagination.appendChild(prevBtn);

var start = Math.max(1, state.page – 2);
var end = Math.min(state.totalPages, state.page + 2);

for (var p = start; p = state.totalPages;
nextBtn.addEventListener(‘click’, function () {
state.page++;
loadProducts();
scrollToTop();
});
pagination.appendChild(nextBtn);
}

function scrollToTop() {
var el = document.querySelector(‘.tp-collection’);
if (el) {
el.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
}
}

function loadProducts() {
grid.innerHTML = ‘

‘;
pagination.innerHTML = ”;
countEl.textContent = ”;

apiFetch(‘/wp-json/wc/store/products?per_page=100’)
.then(function (products) {
var filtered = products.filter(function (product) {
if (!product.name) return false;

var startsWithKrilos = product.name.toLowerCase().indexOf(TITLE_PREFIX) === 0;
if (!startsWithKrilos) return false;

if (state.category) {
var hasCategory = (product.categories || []).some(function (cat) {
return cat.slug === state.category;
});
if (!hasCategory) return false;
}

if (state.search) {
var q = state.search.toLowerCase();
if (product.name.toLowerCase().indexOf(q) === -1) return false;
}

return true;
});

filtered.sort(function (a, b) {
var aPrice = a.prices && a.prices.price ? Number(a.prices.price) : 0;
var bPrice = b.prices && b.prices.price ? Number(b.prices.price) : 0;
var aName = (a.name || ”).toLowerCase();
var bName = (b.name || ”).toLowerCase();
var aPopularity = a.review_count || 0;
var bPopularity = b.review_count || 0;
var aRating = parseFloat(a.average_rating || 0);
var bRating = parseFloat(b.average_rating || 0);
var aDate = new Date(a.date_created || 0).getTime();
var bDate = new Date(b.date_created || 0).getTime();

switch (state.sort) {
case ‘price’:
return aPrice – bPrice;
case ‘price-desc’:
return bPrice – aPrice;
case ‘date’:
return bDate – aDate;
case ‘rating’:
return bRating – aRating;
case ‘popularity’:
return bPopularity – aPopularity;
case ‘menu_order’:
default:
return aName.localeCompare(bName);
}
});

renderPills(filtered);

state.totalItems = filtered.length;
state.totalPages = Math.ceil(filtered.length / PER_PAGE) || 1;

var start = (state.page – 1) * PER_PAGE;
var paged = filtered.slice(start, start + PER_PAGE);

renderProducts(paged);
renderPagination();
countEl.textContent = state.totalItems + ‘ product’ + (state.totalItems !== 1 ? ‘s’ : ”);
})
.catch(function (err) {
console.error(err);
grid.innerHTML = ‘

‘;
});
}

var searchTimer;
searchInput.addEventListener(‘input’, function () {
clearTimeout(searchTimer);
searchTimer = setTimeout(function () {
state.search = searchInput.value.trim();
state.page = 1;
loadProducts();
}, 300);
});

sortSelect.addEventListener(‘change’, function () {
state.sort = sortSelect.value;
state.page = 1;
loadProducts();
});

pillsWrap.addEventListener(‘click’, function (e) {
var btn = e.target.closest(‘.tp-pill’);
if (!btn) return;

state.category = btn.getAttribute(‘data-cat’) || ”;
state.page = 1;

pillsWrap.querySelectorAll(‘.tp-pill’).forEach(function (pill) {
pill.classList.remove(‘is-active’);
});

btn.classList.add(‘is-active’);
loadProducts();
});

loadProducts();
})();