mm code

🧩 Syntax:
<!doctype html>
<html class="js" lang="{{ request.locale.iso_code }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    {% assign templatePrefix = template | replace: '.', ' ' | truncatewords: 1, '' | handle  %}
    {% if templatePrefix == 'collection' %}
      {% if collection.handle == 'wood' or collection.handle == 'metallic-1' or collection.handle == 'black-1' or collection.handle == 'white-1' or collection.handle == 'decorative-style' %}
      <meta name="robots" content="noindex">
     {% endif %}
    {% endif %}

    <meta name="theme-color" content="">
    <link rel="canonical" href="{{ canonical_url }}">
    {%- if settings.favicon != blank -%}
      <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
    {%- endif -%}

    {%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
      <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
    {%- endunless -%}

    <title>
      {{ page_title }}
      {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
      {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
      {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
    </title>
      
    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    <script>
      {% if cart.item_count > 0 %}
        window.hasCartItems = true
      {% else %}
        window.hasCartItems = false
      {% endif %}
    </script>
    
    {% render 'meta-tags' %}
    <script src="{{ 'lazysizes.js' | asset_url }}" async></script>
    <script src="{{ 'constants.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'pubsub.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'details-disclosure.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'details-modal.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'search-form.js' | asset_url }}" defer="defer"></script>
    {%- if settings.animations_reveal_on_scroll -%}
      <script src="{{ 'animations.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}
    <!-- Add this to your theme.liquid file, before any CSS is loaded -->
<script>
  // Create a function to load CSS asynchronously
  function loadCSS(url) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    link.media = 'print';
    link.onload = function() { this.media = 'all'; };
    document.head.appendChild(link);
  }
  
  // Block all stylesheet requests and load them asynchronously
  var originalCreateElement = document.createElement;
  document.createElement = function(type) {
    var element = originalCreateElement.call(document, type);
    if (type.toLowerCase() === 'link') {
      var originalSetAttribute = element.setAttribute;
      element.setAttribute = function(name, value) {
        if (name === 'rel' && value === 'stylesheet') {
          var href;
          setTimeout(function() {
            href = element.getAttribute('href');
            if (href) {
              // Only load essential CSS files immediately
              if (href.includes('base.css') || href.includes('custom.css')) {
                originalSetAttribute.call(element, name, value);
              } else {
                // Load all other CSS asynchronously
                loadCSS(href);
                return;
              }
            }
          }, 0);
        }
        return originalSetAttribute.call(element, name, value);
      };
    }
    return element;
  };
</script>
    {{ content_for_header }}
<script type="text/javascript">
  (function(d) {
    var config = {
      kitId: 'dnc3ktd',
      scriptTimeout: 3000,
      async: true
    },
    h = d.documentElement,
    t = setTimeout(function() {
      h.className = h.className.replace(/\bwf-loading\b/, '') + ' wf-inactive';
    }, config.scriptTimeout),
    tk = d.createElement('script'),
    f = false,
    s = d.getElementsByTagName('script')[0],
    a;
    h.className += ' wf-loading';
    tk.src = 'https://use.typekit.net/&apos; + config.kitId + '.js';
    tk.type = 'text/javascript';
    tk.async = true;
    tk.onload = tk.onreadystatechange = function() {
      a = this.readyState;
      if (f || a && a != 'complete' && a != 'loaded') return;
      f = true;
      clearTimeout(t);
      try {
        Typekit.load(config);
      } catch (e) {}
    };
    s.parentNode.insertBefore(tk, s);
  })(document);
</script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 1. FORCE HERO IMAGES TO LOAD IMMEDIATELY
    var heroSelectors = '.hero img, .slideshow img, .banner img, .slideshow__image, [class*="banner"] img, [class*="hero"] img';
    var heroImages = document.querySelectorAll(heroSelectors);
    
    heroImages.forEach(function(img) {
      // If it's a background image, make sure it's visible
      if (img.classList.contains('slideshow__image')) {
        img.style.opacity = '1';
        img.style.visibility = 'visible';
      }
      
      // Force eager loading
      img.setAttribute('loading', 'eager');
      img.setAttribute('fetchpriority', 'high');
      
      // If image is in a carousel slide, make sure the slide is visible
      var slide = img.closest('.slideshow__slide, .banner__slide');
      if (slide) {
        slide.classList.add('is-selected', 'active');
        slide.style.opacity = '1';
        slide.style.visibility = 'visible';
      }
    });
    
    // Make slideshow containers visible
    document.querySelectorAll('.slideshow, .banner, [class*="hero"]').forEach(function(container) {
      container.classList.add('loaded', 'initialized');
    });
    
    if (typeof AOS !== 'undefined') {
      // Disable AOS initialization
      AOS.init({ disable: true });
    }
    
    document.querySelectorAll('[data-aos]').forEach(function(el) {
      el.style.opacity = '1';
      el.style.transform = 'none';
      el.style.visibility = 'visible';
    });
    
    // 3. MAKE FADE-IN ELEMENTS VISIBLE IMMEDIATELY
    if (typeof $ !== 'undefined') {
      $('.fade-in-element').addClass('fade-in');
    }
    
    // 4. SET GSAP ANIMATIONS TO FINAL STATE
    if (typeof gsap !== 'undefined') {
      gsap.set(".hero-title", {opacity: 1, y: 0});
    }
    
    // 5. MAKE ALL ANIMATE-ON-LOAD ELEMENTS VISIBLE
    document.querySelectorAll('.animate-on-load').forEach(function(el) {
      el.classList.add('visible');
    });
  }, {once: true});
</script>
    {%- liquid
      assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
      assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
      assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
    %}

    {% style %}
      {{ settings.type_body_font | font_face: font_display: 'swap' }}
      {{ body_font_bold | font_face: font_display: 'swap' }}
      {{ body_font_italic | font_face: font_display: 'swap' }}
      {{ body_font_bold_italic | font_face: font_display: 'swap' }}
      {{ settings.type_header_font | font_face: font_display: 'swap' }}

      {% for scheme in settings.color_schemes -%}
        {% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %}
        {% if forloop.index == 1 -%}
          :root,
        {%- endif %}
        .color-{{ scheme.id }} {
          --color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
        {% if scheme.settings.background_gradient != empty %}
          --gradient-background: {{ scheme.settings.background_gradient }};
        {% else %}
          --gradient-background: {{ scheme.settings.background }};
        {% endif %}

        {% liquid
          assign background_color = scheme.settings.background
          assign background_color_brightness = background_color | color_brightness
          if background_color_brightness <= 26
            assign background_color_contrast = background_color | color_lighten: 50
          elsif background_color_brightness <= 65
            assign background_color_contrast = background_color | color_lighten: 5
          else
            assign background_color_contrast = background_color | color_darken: 25
          endif
        %}

        --color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
        --color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }};
        --color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
        --color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
        --color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
        --color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
        --color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
        --color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
        --color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
        --color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
        --color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
        --payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
      }
      {% endfor %}

      {{ scheme_classes | prepend: 'body' }} {
        color: rgba(var(--color-foreground));
        background-color: rgb(var(--color-background));
      }

      :root {
        --font-body-family: "district-pro", {{ settings.type_body_font.fallback_families }};
        --font-body-style: {{ settings.type_body_font.style }};
        --font-body-weight: 400;
        --font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};

        --font-heading-family: "richmond-text", {{ settings.type_header_font.fallback_families }};
        --font-heading-style: {{ settings.type_header_font.style }};
        --font-heading-weight: 500;

        --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
        --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};

        --media-padding: {{ settings.media_padding }}px;
        --media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
        --media-border-width: {{ settings.media_border_thickness }}px;
        --media-radius: {{ settings.media_radius }}px;
        --media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
        --media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
        --media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
        --media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
        --media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};

        --page-width: {{ settings.page_width | divided_by: 10 }}rem;
        --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;

        --product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
        --product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
        --product-card-text-alignment: {{ settings.card_text_alignment }};
        --product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
        --product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
        --product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
        --product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
        --product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
        --product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;

        --collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
        --collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
        --collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
        --collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
        --collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
        --collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
        --collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
        --collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
        --collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;

        --blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
        --blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
        --blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
        --blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
        --blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
        --blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
        --blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
        --blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
        --blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;

        --badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;

        --popup-border-width: {{ settings.popup_border_thickness }}px;
        --popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
        --popup-corner-radius: {{ settings.popup_corner_radius }}px;
        --popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
        --popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
        --popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
        --popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;

        --drawer-border-width: {{ settings.drawer_border_thickness }}px;
        --drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
        --drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
        --drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
        --drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
        --drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;

        --spacing-sections-desktop: {{ settings.spacing_sections }}px;
        --spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;

        --grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
        --grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
        --grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
        --grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;

        --text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
        --text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
        --text-boxes-radius: {{ settings.text_boxes_radius }}px;
        --text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
        --text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
        --text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
        --text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;

        --buttons-radius: {{ settings.buttons_radius }}px;
        --buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
        --buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
        --buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
        --buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
        --buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
        --buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
        --buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
        --buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;

        --inputs-radius: {{ settings.inputs_radius }}px;
        --inputs-border-width: {{ settings.inputs_border_thickness }}px;
        --inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
        --inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
        --inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
        --inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
        --inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
        --inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
        --inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;

        --variant-pills-radius: {{ settings.variant_pills_radius }}px;
        --variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
        --variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
        --variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
        --variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
        --variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
        --variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
      }

      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }

      html {
        box-sizing: border-box;
        font-size: calc(var(--font-body-scale) * 62.5%);
        height: 100%;
      }

      body {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        grid-template-columns: 100%;
        min-height: 100%;
        margin: 0;
        font-size: 1.5rem;
        letter-spacing: 0;
        line-height: calc(1 + 0.8 / var(--font-body-scale));
        font-family: var(--font-body-family);
        font-style: var(--font-body-style);
        font-weight: var(--font-body-weight);
      }

      @media screen and (min-width: 750px) {
        body {
          font-size: 1.6rem;
        }
      }
    {% endstyle %}

    {{ 'base.css' | asset_url | stylesheet_tag }}
    {{ 'component-cart-items.css' | asset_url | stylesheet_tag}}
    {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
    {{ 'component-cart.css' | asset_url | stylesheet_tag }}
    {{ 'beforeafter.css' | asset_url | stylesheet_tag }}

<script>
  // Load lower priority CSS after a slight delay
  window.addEventListener('load', function() {
    // Utility function from above
    function loadCSS(href) {
      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = href;
      link.media = 'print';
      link.onload = function() {
        this.media = 'all';
      };
      document.head.appendChild(link);
    }
    
    // Secondary/component CSS (delay loading these)
    {% if settings.cart_type == 'drawer' %}
      loadCSS("{{ 'component-totals.css' | asset_url }}");
      loadCSS("{{ 'component-price.css' | asset_url }}");
      loadCSS("{{ 'component-discounts.css' | asset_url }}");
    {% endif %}
    
    // Animation and special effects CSS
    loadCSS("{{ 'aos.css' | asset_url }}");
    loadCSS("{{ 'flipdown.css' | asset_url }}");    
    // Third-party CSS
    loadCSS("https://cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.2/css/nanogallery2.min.css");
  });
</script>

<script>
  // Load lowest priority CSS with a longer delay
  setTimeout(function() {
    // Utility function from above
    function loadCSS(href) {
      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = href;
      link.media = 'print';
      link.onload = function() {
        this.media = 'all';
      };
      document.head.appendChild(link);
    }
    
    // Very low priority CSS
    loadCSS("{{ 'quick-add.css' | asset_url }}");
    loadCSS("{{ 'quantity-popover.css' | asset_url }}");
    loadCSS("{{ 'quick-order-list.css' | asset_url }}");
    loadCSS("{{ 'volume-pricing.css' | asset_url }}");
    
    // Third-party low priority CSS
    loadCSS("https://d3hw6dc1ow8pp2.cloudfront.net/reviews-widget-plus/css/modules/okendo-reviews-tab.fab7dc6e.css");
  }, 2000);  // 2 second delay
</script>

{% comment %}
    <link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}" media="print" onload="this.media='all'">

    {%- if settings.cart_type == 'drawer' -%}
      {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
      {{ 'component-cart.css' | asset_url | stylesheet_tag }}
      {{ 'component-totals.css' | asset_url | stylesheet_tag }}
      {{ 'component-price.css' | asset_url | stylesheet_tag }}
      {{ 'component-discounts.css' | asset_url | stylesheet_tag }}
    {%- endif -%}
{% endcomment %}
    {%- unless settings.type_body_font.system? -%}
      {% comment %}theme-check-disable AssetPreload{% endcomment %}
      <link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
      {% comment %}theme-check-enable AssetPreload{% endcomment %}
    {%- endunless -%}
    {%- unless settings.type_header_font.system? -%}
      {% comment %}theme-check-disable AssetPreload{% endcomment %}
      <link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
      {% comment %}theme-check-enable AssetPreload{% endcomment %}
    {%- endunless -%}

    {%- if localization.available_countries.size > 1 or localization.available_languages.size > 1 -%}
      {{ 'component-localization-form.css' | asset_url | stylesheet_tag: preload: true }}
      <script src="{{ 'localization-form.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

    {%- if settings.predictive_search_enabled -%}
      <link
        rel="stylesheet"
        href="{{ 'component-predictive-search.css' | asset_url }}"
        media="print"
        onload="this.media='all'"
      >
    {%- endif -%}

    <script>
      if (Shopify.designMode) {
        document.documentElement.classList.add('shopify-design-mode');
      }
    </script>
    {{ 'swiper-bundle.min.css' | asset_url | stylesheet_tag }}
    {{ 'component-card.css' | asset_url | stylesheet_tag }}
    {{ 'component-slider.css' | asset_url | stylesheet_tag }}
    {{ 'component-rating.css' | asset_url | stylesheet_tag }}
    {{ 'custom.css' | asset_url | stylesheet_tag }}
    {{ 'custom_2.css' | asset_url | stylesheet_tag }}
    <script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>
    {{ 'product-swatches.css' | asset_url | stylesheet_tag }}
    {{ "frame-model.css" | asset_url | stylesheet_tag }}
    <script src="{{ 'frame-button.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'frame-model.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'product-swatches.js' | asset_url }}" defer="defer"></script>
    {% if template.name == 'index' or template.name == 'collection' or template.name == 'search' or template.name == 'product' %}
      <script src="{{ 'product-info.js' | asset_url }}" defer="defer"></script>
      <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
      <script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
    {% endif %}

<!-- Bing UET Tag -->
<script>
    (function(w,d,t,r,u)
    {
        var f,n,i;
        w[u]=w[u]||[],f=function()
        {
            var o={ti:"42000070", enableAutoSpaTracking: true};
            o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")
        },
        n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function()
        {
            var s=this.readyState;
            s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)
        },
        i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)
    })
    (window,document,"script","//bat.bing.com/bat.js","uetq");
</script>
    
    {%- render 'checklogin' -%}
    {%- render 'header-script' -%}
  </head>

  <body class="{% if page.metafields.custom.page_lp_header_footer_new == true %}Page_lp_header_footer_new {% endif %}template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} template-{{ template.suffix }} gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">
    <a class="skip-to-content-link button visually-hidden" href="#MainContent">
      {{ 'accessibility.skip_to_text' | t }}
    </a>

    {% assign urlParam = '' %}
    {% if customer %}
      {% if customer.metafields.SAGE.ARDivisionNo == '22' %}  
         {% assign urlParam = '?usertype=multifamily' %}
      {% elsif customer.metafields.SAGE.ARDivisionNo == '20' %}  
         {% assign urlParam = '?usertype=dealer' %}
      {% elsif customer.metafields.SAGE.ARDivisionNo == '23' %}  
         {% assign urlParam = '?usertype=builder' %}
      {% elsif customer.metafields.SAGE.ARDivisionNo == '30' %}  
         {% assign urlParam = '?usertype=hotel' %}
      {% endif %}
    {% endif %}


   
    
    {%- if settings.cart_type == 'drawer' -%}
      {%- render 'cart-drawer' -%}
    {%- endif -%}

    {% sections 'header-group' %}

    <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
      {{ content_for_layout }}
    </main>

    <div class="overlay"></div>
    {% if page.metafields.custom.page_lp_header_footer_new == true %}
      {% sections 'LP-Footer-group-new' %}
    {%- else -%}  
      {% sections 'footer-group' %}
    {%- endif -%}

    <ul hidden>
      <li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>
      <li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>
    </ul>

    <script>
      window.shopUrl = '{{ request.origin }}';
      window.routes = {
        cart_add_url: '{{ routes.cart_add_url }}',
        cart_change_url: '{{ routes.cart_change_url }}',
        cart_update_url: '{{ routes.cart_update_url }}',
        cart_url: '{{ routes.cart_url }}',
        predictive_search_url: '{{ routes.predictive_search_url }}',
      };

      window.cartStrings = {
        error: `{{ 'sections.cart.cart_error' | t }}`,
        quantityError: `{{ 'sections.cart.cart_quantity_error_html' | t: quantity: '[quantity]' }}`,
      };

      window.variantStrings = {
        addToCart: `{{ 'products.product.add_to_cart' | t }}`,
        soldOut: `{{ 'products.product.sold_out' | t }}`,
        unavailable: `{{ 'products.product.unavailable' | t }}`,
        unavailable_with_option: `{{ 'products.product.value_unavailable' | t: option_value: '[value]' }}`,
      };

      window.quickOrderListStrings = {
        itemsAdded: `{{ 'sections.quick_order_list.items_added.other' | t: quantity: '[quantity]' }}`,
        itemAdded: `{{ 'sections.quick_order_list.items_added.one' | t: quantity: '[quantity]' }}`,
        itemsRemoved: `{{ 'sections.quick_order_list.items_removed.other' | t: quantity: '[quantity]' }}`,
        itemRemoved: `{{ 'sections.quick_order_list.items_removed.one' | t: quantity: '[quantity]' }}`,
        viewCart: `{{- 'sections.quick_order_list.view_cart' | t -}}`,
        each: `{{- 'sections.quick_order_list.each' | t: money: '[money]' }}`,
        min_error: `{{- 'sections.quick_order_list.min_error' | t: min: '[min]' }}`,
        max_error: `{{- 'sections.quick_order_list.max_error' | t: max: '[max]' }}`,
        step_error: `{{- 'sections.quick_order_list.step_error' | t: step: '[step]' }}`,
      };

      window.accessibilityStrings = {
        imageAvailable: `{{ 'products.product.media.image_available' | t: index: '[index]' }}`,
        shareSuccess: `{{ 'general.share.success_message' | t }}`,
        pauseSlideshow: `{{ 'sections.slideshow.pause_slideshow' | t }}`,
        playSlideshow: `{{ 'sections.slideshow.play_slideshow' | t }}`,
        recipientFormExpanded: `{{ 'recipient.form.expanded' | t }}`,
        recipientFormCollapsed: `{{ 'recipient.form.collapsed' | t }}`,
        countrySelectorSearchCount: `{{ 'localization.country_results_count' | t: count: '[count]' }}`,
      };
    </script>

    <!-- PAYPAL SCRIPT -->
    <script src="https://www.paypal.com/sdk/js?client-id=AVy3oxj6cG9xwX8cyEg75-MhYqLmny0RiJZjLEqQn5R7ih98y6SK7ym43VvK_ZUTE4o41lxESvzulRN7&components=messages,buttons"; data-namespace="PayPalSDK" defer></script>


    {%- if settings.predictive_search_enabled -%}
      <script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

    {%- if settings.cart_type == 'drawer' -%}
      <script src="{{ 'cart-drawer.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}
    <script src="{{ 'swiper-bundle.min.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'simple-parallax-js.min.js' | asset_url }}" defer="defer"></script>
    <script>
    document.addEventListener("DOMContentLoaded", (event) => {
      console.log("DOM fully loaded and parsed");
      let img3 = document.querySelectorAll('.Index_quote_images_main_new .Index_quote_image_main .quote_image_new');
      new simpleParallax(img3);
      document.addEventListener("scroll", parallax);
      
      function parallax() {
      const layers = document.querySelectorAll('.Index_quote_images_main_new .Index_quote_image_main');
      const scrollPosition = window.pageYOffset || document.documentElement.scrollTop; // Get the scroll position
      
      layers.forEach((layer, index) => {
          const baseSpeed = 1;  // Base speed increment
          const speed = baseSpeed * (index + 1);  // Increment speed by 0.2 for each element
          const y = -(scrollPosition * speed) / 100;  // Apply parallax effect and divide by 100
          layer.style.transform = `translateY(${y}px)`;  // Adjust the Y-axis for parallax
      });
      }
      });
    </script>

    
    <script>
          if (window.location.search.includes('viewcart=true')) {
            if(document.querySelector('cart-drawer')) {
              document.querySelector('cart-drawer').classList.add('active');
            }
             window.history.replaceState({}, "", '/');
          }
    </script>
    
    <ajax-product-framing></ajax-product-framing>
  </body>
</html>