12 oz Mug-Oat

const secondLineOfSwatchesObserver = new MutationObserver(() => {
const separateSwatchesSpan = ‘New Colors’;
const specificSwatchLineClass = ‘second-line’;
const separateColorSelector = `
.product-options-wrapper .m-swatch-group__container .m-swatch[data-option-label=”Reef”],
.product-options-wrapper .m-swatch-group__container .m-swatch[data-option-label=”Aloe”],
.product-options-wrapper .m-swatch-group__container .m-swatch[data-option-label=”Surf”],
.product-options-wrapper .m-swatch-group__container .m-swatch[data-option-label=”Tonal Trillium”],
.product-options-wrapper .m-swatch-group__container .m-swatch[data-option-label=”Tonal Birch”],
.product-options-wrapper .m-swatch-group__container .m-swatch[data-option-label=”Tonal Agave”],
.product-options-wrapper .m-swatch-group__container .m-swatch[data-option-label=”Botanical Bliss] `;

if (document.querySelectorAll(‘.product-options-wrapper .swatch-option-selected’).length) {
productsOptionsWrappper.classList.add(‘swatches-ready’);

if (!document.querySelectorAll(separateColorSelector).length || !document.querySelector(‘.product-options-wrapper’)) {
secondLineOfSwatchesObserver.disconnect();
return;
}

const swatchContainer = document.querySelector(‘.product-options-wrapper .m-swatch-group__container’);
const separateSwatchesDiv = document.createElement(‘div’);
const oosSpan = document.createElement(‘span’);
const header = document.querySelector(‘.product-options-wrapper .m-swatch-group__header’);
const headerBadge = document.querySelector(‘.product-options-wrapper .m-swatch-group__header-badge’);
const headerClone = header.cloneNode(true);
const headerBadgeClone = headerBadge.cloneNode(true);

separateSwatchesDiv.classList.add(‘separate-swatches’, specificSwatchLineClass, ‘flex’, ‘flex-wrap’, ‘gap-x-3’);
separateSwatchesDiv.innerHTML = `

`;

swatchContainer.appendChild(separateSwatchesDiv);

oosSpan.classList.add(‘swatch-attribute–oos’, ‘text-red’, ‘font-bold’, ‘uppercase’);
oosSpan.style.display = ‘none’;
oosSpan.textContent = ‘Color Out of Stock’;

separateSwatchesDiv.querySelector(‘.separate-swatches__label’).insertAdjacentElement(‘afterend’, oosSpan);
headerBadgeClone.classList.add(‘separate-swatch-group__header-badge’);
separateSwatchesDiv.querySelector(‘.separate-swatches__label’).insertAdjacentElement(‘afterend’, headerBadgeClone);
headerBadge.classList.add(‘main-swatch-group__header’);
headerClone.classList.add(‘separate-swatch-group__header’);
separateSwatchesDiv.querySelector(‘.separate-swatches__label’).insertAdjacentElement(‘afterend’, headerClone);
header.classList.add(‘main-swatch-group__header’);

document.querySelectorAll(separateColorSelector).forEach(el => {
separateSwatchesDiv.appendChild(el);
});

const excludeEngravingList = [
‘Checkered Ecru’,
‘Checkered Indigo’,
‘Sugar Crush’,
‘Stainless Lime’,
‘Stainless Violet’,
‘Sugarplum’,
‘Winter Night’,
‘Holiday Punch’,
‘Polar Plunge’,
‘Spearmint’,
‘Botanical Bliss’,
‘Oat’,
‘Glacier’
];

document.querySelectorAll(separateColorSelector).forEach(el => {
if (excludeEngravingList.includes(el.getAttribute(‘data-option-label’))) {
el.classList.add(‘exclude-inline-engraving’);
}
});

if (separateSwatchesDiv.querySelectorAll(‘div.swatch-option-selected’).length) {
document.querySelector(‘.main-swatch-group__header’).classList.add(‘invisible’);
document.querySelector(‘.m-swatch-group__header-badge.main-swatch-group__header’).classList.add(‘invisible’);
separateSwatchesDiv.querySelector(‘.separate-swatches__label’).style.display = ‘none’;
separateSwatchesDiv.querySelector(‘.separate-swatch-group__header’).style.display = ‘block’;
} else {
separateSwatchesDiv.querySelectorAll(‘.separate-swatch-group__header, .separate-swatch-group__header-badge’).forEach(el => {
el.classList.add(‘invisible’);
});
}

if (document.querySelector(‘.swatch-option-selected’).classList.contains(‘exclude-inline-engraving’)) {
document.querySelector(‘.pdp-grid-info .icomoon-engrave’) ? document.querySelector(‘.pdp-grid-info .icomoon-engrave’).parentElement.style.display = ‘none’ : ”;
} else {
document.querySelector(‘.pdp-grid-info .icomoon-engrave’) ? document.querySelector(‘.pdp-grid-info .icomoon-engrave’).parentElement.style.display = ‘flex’ : ”;
}

if (Array.from(document.querySelectorAll(separateColorSelector)).some(el => el.classList.contains(‘selected’))) {
const visibleLabel = Array.from(separateSwatchesDiv.querySelectorAll(‘.separate-swatches__label’)).find(el => {
return window.getComputedStyle(el).display !== ‘none’;
});

if (visibleLabel) visibleLabel.style.display = ‘none’;
}

secondLineOfSwatchesObserver.disconnect();

separateSwatchesDiv.querySelectorAll(‘.m-swatch’).forEach(el => {
el.addEventListener(‘click’, () => {
if (el.querySelector(‘div.diagonal-cross-out’)) {
productsOptionsWrappper.classList.add(‘product-oos’);
} else {
productsOptionsWrappper.classList.remove(‘product-oos’);
}

if (el.classList.contains(‘exclude-inline-engraving’)) {
document.querySelector(‘.pdp-grid-info .icomoon-engrave’) ? document.querySelector(‘.pdp-grid-info .icomoon-engrave’).parentElement.style.display = ‘none’ : ”;
} else {
document.querySelector(‘.pdp-grid-info .icomoon-engrave’) ? document.querySelector(‘.pdp-grid-info .icomoon-engrave’).parentElement.style.display = ‘flex’ : ”;
}

separateSwatchesDiv.querySelectorAll(‘.separate-swatch-group__header.invisible, .separate-swatch-group__header-badge.invisible’).forEach(el => {
el.classList.remove(‘invisible’);
});

document.querySelector(‘.main-swatch-group__header:not(.invisible)’).classList.add(‘invisible’);
document.querySelector(‘.m-swatch-group__header-badge.main-swatch-group__header’).classList.add(‘invisible’);

const visibleLabel = Array.from(separateSwatchesDiv.querySelectorAll(‘.separate-swatches__label’)).find(el => {
return window.getComputedStyle(el).display !== ‘none’;
});

if (visibleLabel) {
visibleLabel.style.display = ‘none’;
}

const anotherSeparateSwatches = document.querySelectorAll(`.separate-swatches:not(.${specificSwatchLineClass})`);

if (anotherSeparateSwatches.length) {
anotherSeparateSwatches.forEach(swatchLine => {
const swatchLineLabel = swatchLine.querySelector(‘.separate-swatches__label’);

swatchLineLabel.style.display = ‘block’;
});
}
});
});

document.querySelectorAll(‘.product-options-wrapper .m-swatch-group__container__original .m-swatch’).forEach(el => {
el.addEventListener(‘click’, () => {
productsOptionsWrappper.classList.remove(‘product-oos’);

document.querySelectorAll(‘.main-swatch-group__header.invisible’).forEach(el => {
el.classList.remove(‘invisible’);
});

document.querySelectorAll(‘.separate-swatch-group__header:not(.invisible), .separate-swatch-group__header-badge:not(.invisible)’).forEach(el => {
el.classList.add(‘invisible’);
});

document.querySelector(‘.pdp-grid-info .icomoon-engrave’) ? document.querySelector(‘.pdp-grid-info .icomoon-engrave’).parentElement.style.display = ‘flex’ : ”;

document.querySelectorAll(‘.separate-swatches__label’).forEach(element => {
element.style.display = ‘block’;
});
});
});
}
});

if (window.hyva) {
secondLineOfSwatchesObserver.observe(productsOptionsWrappper, {
childList: true,
subtree: true
});
}

#html-body .separate-swatches span {
display: inline-block;
margin-bottom: 13px;
margin-left: 10px;
}

#html-body .separate-swatches span.separate-swatch-group__header-badge {
margin-left: 8px;
}

#html-body .separate-swatches .separate-swatches__label {
margin-left: -10px;
}

#html-body .separate-swatches .separate-swatch-group__header:not(.swatch-group__header-hidden) {
margin-left: -10px;
}

.swatch-group__header-hidden {
visibility: hidden !important;
}

.separate-swatches .swatch-option {
display: inline-block;
}

.product-options-wrapper.product-oos .swatch-attribute–oos {
display: none !important;
}

.product-options-wrapper:not(.product-oos) .separate-swatches__labels .swatch-attribute–oos {
display: none !important;
}

.product-options-wrapper.product-oos .separate-swatches .swatch-attribute–oos {
display: inline-block !important;
}

@media (max-width: 475px) {
.product-options-wrapper.product-oos .separate-swatches .swatch-attribute–oos {
display: block !important;
margin-left: -10px !important;
}
}

.separate-swatches > div:not(.separate-swatches__labels) {
margin-bottom: .75rem;
}