/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:25 Expected identifier but found whitespace
Line 17:64 Expected identifier but found whitespace
Line 20:1 Expected identifier but found "%"
Line 22:0 Unexpected "{"
Line 22:1 Unexpected "{"
Line 22:3 Expected identifier but found "'page-loader.css'"
Line 23:0 Unexpected "<"
Line 88:0 Unexpected "<"
... and 12 more hidden warnings

**/
{%- comment -%}
  Full-screen FOUC cover: brand green + logo + centered spinner.
  CSS and JS are inlined so the snippet works even if theme assets
  have not been uploaded yet.
{%- endcomment -%}

{{ 'page-loader.css' | asset_url | stylesheet_tag }}
<script src="{{ 'page-loader.js' | asset_url }}" defer="defer"></script>
<style>
  .viperia-page-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    padding: 1.5rem;
    margin: 0;
    box-sizing: border-box;
    background: var(--viperia-loader-bg, #002621);
    color: #fff;
    transition: opacity 0.45s ease, visibility 0.45s ease;
  }
  .viperia-page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .viperia-page-loader__logo {
    width: min(220px, 55vw);
    height: auto;
    margin: 0;
    object-fit: contain;
  }
  .viperia-page-loader__logo-text {
    margin: 0;
    font-family: var(--font-heading-family, 'Roboto Condensed', sans-serif);
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 700;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    text-transform: uppercase;
    color: #fff;
  }
  .viperia-page-loader__spinner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    pointer-events: none;
  }
  .viperia-page-loader__spinner {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.22);
    border-top-color: #fff;
    animation: viperia-loader-spin 0.85s linear infinite;
  }
  @keyframes viperia-loader-spin {
    to { transform: rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .viperia-page-loader { transition-duration: 0.01ms; }
    .viperia-page-loader__spinner {
      animation: none;
      border-top-color: rgba(255, 255, 255, 0.22);
      border-right-color: #fff;
    }
  }
</style>

<div
  id="viperia-page-loader"
  class="viperia-page-loader"
  role="status"
  aria-live="polite"
  aria-busy="true"
  aria-label="{{ 'accessibility.loading' | t }}"
>
  {%- if settings.logo != blank -%}
    {{
      settings.logo
      | image_url: width: 480
      | image_tag:
        class: 'viperia-page-loader__logo',
        widths: '160, 240, 320, 480',
        sizes: '(max-width: 749px) 55vw, 220px',
        alt: shop.name,
        loading: 'eager',
        fetchpriority: 'high'
    }}
  {%- else -%}
    <span class="viperia-page-loader__logo-text">{{ shop.name }}</span>
  {%- endif -%}

  <div class="viperia-page-loader__spinner-wrap" aria-hidden="true">
    <div class="viperia-page-loader__spinner"></div>
  </div>
</div>

<script>
  (function () {
    if (window.__viperiaPageLoaderBound) return;
    window.__viperiaPageLoaderBound = true;
    var MAX_WAIT_MS = 4000;
    var FADE_MS = 450;
    var hidden = false;

    function hideLoader() {
      if (hidden) return;
      hidden = true;
      var el = document.getElementById('viperia-page-loader');
      if (!el) return;
      el.classList.add('is-hidden');
      el.setAttribute('aria-hidden', 'true');
      el.setAttribute('aria-busy', 'false');
      setTimeout(function () {
        if (el.parentNode) el.parentNode.removeChild(el);
        document.documentElement.classList.remove('viperia-loading');
      }, FADE_MS + 50);
    }

    function whenFontsReady() {
      if (document.fonts && document.fonts.ready) {
        return document.fonts.ready.catch(function () {});
      }
      return Promise.resolve();
    }

    function ready() {
      var domReady =
        document.readyState === 'interactive' || document.readyState === 'complete'
          ? Promise.resolve()
          : new Promise(function (resolve) {
              document.addEventListener('DOMContentLoaded', resolve, { once: true });
            });
      Promise.all([domReady, whenFontsReady()]).then(function () {
        requestAnimationFrame(function () {
          requestAnimationFrame(hideLoader);
        });
      });
    }

    ready();
    window.addEventListener('load', hideLoader, { once: true });
    setTimeout(hideLoader, MAX_WAIT_MS);
  })();
</script>