The Skincare Travel Kit

USD

// Inline header height calculation to prevent layout shift // Note: Updates in calculateHeaderGroupHeight() and updateTransparentHeaderOffset()utilities.js should be kept in sync with this function (function setHeaderHeighCustomProperties() { /* * Header calculation functions for maintaining CSS variables * Mimic calculateHeaderGroupHeight() in utilities.js */ const header = document.querySelector('header-component'); const headerGroup = document.querySelector('#header-group'); const hasHeaderSection = headerGroup?.querySelector('.header-section'); if (!header || !headerGroup) return; const headerHeight = header.offsetHeight; // Calculate the total height of the header group let headerGroupHeight = 0; const children = headerGroup.children; for (let i = 0; i < children.length; i++) { const element = children[i]; if (element === header || !(element instanceof HTMLElement)) continue; headerGroupHeight += element.offsetHeight; } // Check for transparent header special case if (header.hasAttribute('transparent') && header.parentElement?.nextElementSibling) { headerGroupHeight += headerHeight; } // Set CSS variables document.body.style.setProperty('--header-height', `${headerHeight}px`); document.body.style.setProperty('--header-group-height', `${headerGroupHeight}px`); /** * Updates CSS custom properties for transparent header offset calculation * Mimic updateTransparentHeaderOffset() in utilities.js */ if (!hasHeaderSection || !header?.hasAttribute('transparent')) { document.body.style.setProperty('--transparent-header-offset-boolean', '0'); return; } const hasImmediateSection = hasHeaderSection.nextElementSibling?.classList.contains('shopify-section'); const shouldApplyOffset = !hasImmediateSection ? '1' : '0'; document.body.style.setProperty('--transparent-header-offset-boolean', shouldApplyOffset); })();