<style>
*Delete tilda style*/
.t-store__card {max-width: 280px; margin-bottom: 30px!important;}
.t-store__card__imgwrapper {padding-bottom: 0!important;}
.t-store__card__img {position: relative!important;}
.t-store__card__textwrapper {padding-top: 0!important;}
.t-store__card {display: flex; flex-direction: column;}
#allrecords b {font-weight: 600!important;}
.t-store__card__textwrapper {padding-top: 20px!important;}
/*Delete tilda style*/
/*New grid*/
.t-container {padding: 0 20px;box-sizing: border-box;}
.t-clear.t-store__grid-separator {display: none;}
.t-store__card a {display: flex;flex-direction: column;}
/*New grid*/
/*Card style*/
.t-store__relevants-grid-cont {display: flex;gap: 85px;flex-direction: column;overflow-x: hidden!important;}
.t-store__prod-popup__text {text-transform: none!important;}
.js-store-prod-all-text {font-size:13px;}
.js-store-prod-all-charcs {text-transform: uppercase; font-size: 13px; margin-top: 40px!important;}
.js-store-prod-charcs {display: grid; grid-template-columns: 113px 1fr; padding-bottom: 30px;}
.t-store__relevants-grid-cont .t-store__card {margin: 0!important;}
.t-store__relevants__title,.t-store__prod-popup__name {font-size: 36px!important;}
/*Card style*/
@media (max-width: 768px) {
.t-store__grid-cont {padding: 0!important;}
}
@media (min-width: 1024px) {
.t-store__card {margin: 0!important;max-width: 330px;margin-bottom: 0;}
.t-store__card a {padding-bottom: 85px;}
/*Card style*/
.t-store__prod-popup__container {padding-top: 100px;}
.t-store__prod-popup__slider {padding-right: 60px; box-sizing: border-box;}
.t-store__prod-popup__name {line-height: 1.25!important;}
.t-store__relevants-grid-cont {flex-direction: row;}
.t-store__relevants-grid-cont::after {display: none;}
.js-product-relevant {max-width: 330px!important;}
.js-product-relevant a {padding-bottom: 0;}
.t-store__card__title {font-size: 12px;}
.t-store__relevants__title {margin: 150px 0 80px;}
/*Card style*/
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<script>
window.addEventListener("load", function(event) {
let elem = document.querySelector('.js-store-grid-cont');
let target = document.querySelector('.t-store');
const config = {
attributes: true,
childList: true,
subtree: true
};
masonry();
editName();
editNameCart();
editCharcs();
function masonry () {
if (window.matchMedia("(min-width: 1024px)").matches) {
var msnry = new Masonry( elem, {
itemSelector: '.t-store__card',
gutter: 85,
horizontalOrder: true,
columnWidth: 330,
percentPosition: true
});
}
}
const callback = function(mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
} else if (mutation.type === 'attributes') {
masonry();
editName();
editNameCart();
editCharcs();
}
}
};
function editName () {
let name = document.querySelectorAll('.t-store__card__title');
let nameContent;
name.forEach(el => {
nameContent = el.textContent.split('__').slice(1);
for (let i = 0; i < nameContent.length; i += 1) {
el.innerHTML = `<b>${nameContent[0]}</b><br>${nameContent[1]}`;
}
});
}
function editNameCart () {
let name2 = document.querySelector('.t-store__prod-popup__name');
let nameContent2 = name2.textContent.split('__').slice(2);
for (let i = 0; i < nameContent2.length; i += 1) {
name2.innerHTML = `${nameContent2[0]}`;
}
}
function editCharcs() {
let charc = document.querySelectorAll('.js-store-prod-charcs');
charc.forEach(e => {
let charcContent = e.textContent.split(':');
for (let i = 0; i < charcContent.length; i += 1) {
e.innerHTML = `<b class="js-store-prod-charcs--left">${charcContent[0]}:</b><span class="js-store-prod-charcs--right" style="max-width: 340px;">${charcContent[1]}</span>`;
}
});
}
const observer = new MutationObserver(callback);
observer.observe(target, config);
});
</script>
<style>
.t-store__relevants-grid-cont {display: flex;gap: 85px;flex-direction: column;overflow-x: hidden!important;}
.t-store__prod-popup__text {text-transform: none!important;}
.js-store-prod-all-text {font-size:13px;}
.js-store-prod-all-charcs {text-transform: uppercase; font-size: 13px; margin-top: 40px!important;}
.js-store-prod-charcs {display: grid; grid-template-columns: 113px 1fr; padding-bottom: 30px;}
.t-store__relevants-grid-cont .t-store__card {margin: 0!important;}
.t-store__relevants__title,.t-store__prod-popup__name {font-size: 36px!important;}
#allrecords b {font-weight: 600!important;}
@media (min-width: 1024px) {
/*Card style*/
.t-store__prod-popup__container {padding-top: 100px;}
.t-store__prod-popup__slider {padding-right: 60px; box-sizing: border-box;}
.t-store__prod-popup__name {line-height: 1.25!important;}
.t-store__relevants-grid-cont {flex-direction: row;}
.t-store__relevants-grid-cont::after {display: none;}
.js-product-relevant {max-width: 330px!important;}
.js-product-relevant a {padding-bottom: 0;}
/*.t-store__card__textwrapper {padding-top: 20px!important;}*/
.t-store__card__title {font-size: 12px;}
.t-store__relevants__title {margin: 150px 0 80px;}
/*Card style*/
}
</style>
<script>
window.addEventListener("load", function(event) {
let target = document.querySelector('.t-store');
const config = {
attributes: true,
childList: true,
subtree: true
};
editName();
editNameCart();
editCharcs();
const callback = function(mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
} else if (mutation.type === 'attributes') {
editName();
editNameCart();
editCharcs();
}
}
};
function editName () {
let name = document.querySelectorAll('.t-store__card__title');
let nameContent;
name.forEach(el => {
nameContent = el.textContent.split('__').slice(1);
for (let i = 0; i < nameContent.length; i += 1) {
el.innerHTML = `<b>${nameContent[0]}</b><br>${nameContent[1]}`;
}
});
}
function editNameCart () {
let name = document.querySelector('.t-store__prod-popup__name');
let nameContent = name.textContent.split('__').slice(2);
for (let i = 0; i < nameContent.length; i += 1) {
name.innerHTML = `${nameContent[0]}`;
}
}
function editCharcs() {
let charc = document.querySelectorAll('.js-store-prod-charcs');
charc.forEach(e => {
let charcContent = e.textContent.split(':');
for (let i = 0; i < charcContent.length; i += 1) {
e.innerHTML = `<b class="js-store-prod-charcs--left">${charcContent[0]}:</b><span class="js-store-prod-charcs--right" style="max-width: 340px;">${charcContent[1]}</span>`;
}
});
}
const observer = new MutationObserver(callback);
observer.observe(target, config);
});
</script>