/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 18:3 Expected identifier but found "%"
Line 19:9 Unexpected "="
Line 20:3 Expected identifier but found "%"
Line 21:6 Unexpected "="
Line 24:5 Expected identifier but found "%"
Line 25:6 Unexpected "<"
Line 30:5 Expected identifier but found "%"
Line 32:4 Unexpected "{"
Line 32:5 Expected identifier but found "%"
... and 71 more hidden warnings

**/
<!doctype html>
<html
  {% if request.design_mode %}
    class="shopify-design-mode"
  {% endif %}
  lang="{{ request.locale.iso_code }}"
>
  <head>
    {%- if settings.favicon != blank -%}
      <link
        rel="icon"
        type="image/png"
        href="{{ settings.favicon | image_url: width: 32, height: 32 }}"
      >
    {%- endif -%}

    {% comment %} This a way to wait for main content to load when navigating to a new page so that the view transitions can work consistently {% endcomment %}
    {% if settings.transition_to_main_product or settings.page_transition_enabled %}
      <link
        rel="expect"
        href="#MainContent"
        blocking="render"
        id="view-transition-render-blocker"
      >
    {% endif %}

    <meta name="theme-color" content="#050505">
    <meta name="color-scheme" content="dark">

    {%- render 'meta-tags' -%}
    {%- render 'stylesheets' -%}
    {%- render 'fonts' -%}
    {%- render 'scripts' -%}
    {%- render 'theme-styles-variables' -%}
    {%- render 'color-schemes' -%}

    {% if request.design_mode %}
      {%- render 'theme-editor' -%}
    {% endif %}

    {{ content_for_header }}
    {%- comment -%} ===== JEANS LAB: stile cromato ===== {%- endcomment -%}
    <style id="jl-chrome-style">
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --jl-black: #050505;
  --jl-ink: #0c0c0e;
  --jl-line: rgba(255, 255, 255, 0.10);
  --jl-text: #f2f2f4;
  --jl-muted: #9a9ca4;
  --jl-chrome: linear-gradient(180deg, #ffffff 0%, #e6e7ea 20%, #8b8d95 44%, #fbfbfc 52%, #55575f 60%, #c9cbd1 80%, #ffffff 100%);
  --jl-chrome-diag: linear-gradient(135deg, #ffffff 0%, #6c6e76 28%, #f4f4f6 50%, #4d4f57 72%, #e9e9ec 100%);
  --jl-font-display: 'Cinzel', 'Times New Roman', serif;
  --jl-font-body: 'Space Grotesk', system-ui, sans-serif;
  --jl-font-mono: 'Space Mono', ui-monospace, monospace;
}

html, body { background: var(--jl-black); color: var(--jl-text); }
::selection { background: #e6e7ea; color: var(--jl-black); }

/* Scrollbar cromata */
html { scrollbar-color: #6c6e76 var(--jl-black); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--jl-black); }
::-webkit-scrollbar-thumb { background: var(--jl-chrome-diag); border-radius: 10px; border: 2px solid var(--jl-black); }

/* ---------- Utility condivise dalle sezioni JL ---------- */
.jl-chrome-text {
  background:
    linear-gradient(110deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%) 0 0 / 250% 100% no-repeat,
    var(--jl-chrome);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.25)) drop-shadow(0 10px 30px rgba(255,255,255,.08));
  animation: jl-shine 5s ease-in-out infinite;
}
@keyframes jl-shine {
  0%, 55% { background-position: 150% 0, 0 0; }
  100%    { background-position: -100% 0, 0 0; }
}

.jl-eyebrow {
  font-family: var(--jl-font-mono);
  font-size: 12px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--jl-muted);
}

.jl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 16px 34px;
  border-radius: 999px;
  font-family: var(--jl-font-mono);
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none;
  color: var(--jl-text);
  border: 1px solid transparent;
  background: linear-gradient(var(--jl-black), var(--jl-black)) padding-box, var(--jl-chrome-diag) border-box;
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease;
  position: relative; overflow: hidden;
}
.jl-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 12px 40px rgba(255,255,255,.12); }
.jl-btn--solid { background: var(--jl-chrome); color: var(--jl-black); font-weight: 700; }
.jl-btn--solid:hover { color: var(--jl-black); }
.jl-btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.jl-btn:hover::after { transform: translateX(120%); }

.jl-sparkle { position: absolute; width: 24px; height: 24px; pointer-events: none; animation: jl-twinkle 3.2s ease-in-out infinite; }
.jl-sparkle path { fill: #e6e7ea; fill: url(#jl-chrome-grad) #e6e7ea; }
@keyframes jl-twinkle {
  0%, 100% { opacity: .15; transform: scale(.6) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1)  rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .jl-chrome-text, .jl-sparkle, .jl-orbit, .jl-marquee__track { animation: none !important; }
}
    </style>

    {%- comment -%} ===== JEANS LAB: tutto il sito nero con testi bianchi ===== {%- endcomment -%}
    <style id="jl-dark-mode">
      :root,
      html body,
      html body [class*='color-scheme'] {
        --color-background: #050505;
        --color-background-rgb: 5 5 5;
        --color-foreground: #f2f2f4;
        --color-foreground-rgb: 242 242 244;
        --color-foreground-heading: #ffffff;
        --color-foreground-heading-rgb: 255 255 255;
        --color-primary: #e6e7ea;
        --color-primary-rgb: 230 231 234;
        --color-primary-hover: #ffffff;
        --color-primary-hover-rgb: 255 255 255;
        --color-border: #26262b;
        --color-border-rgb: 38 38 43;
        --color-shadow: #000000;
        --color-shadow-rgb: 0 0 0;

        --color-primary-button-background: #e6e7ea;
        --color-primary-button-text: #050505;
        --color-primary-button-border: #e6e7ea;
        --color-primary-button-hover-background: #ffffff;
        --color-primary-button-hover-text: #050505;
        --color-primary-button-hover-border: #ffffff;

        --color-secondary-button-background: #050505;
        --color-secondary-button-text: #f2f2f4;
        --color-secondary-button-border: #f2f2f4;
        --color-secondary-button-hover-background: #f2f2f4;
        --color-secondary-button-hover-text: #050505;
        --color-secondary-button-hover-border: #f2f2f4;

        --color-input-background: #0c0c0e;
        --color-input-text: #f2f2f4;
        --color-input-text-rgb: 242 242 244;
        --color-input-border: #2a2a2e;
        --color-input-hover-background: #141416;

        --color-variant-background: #0c0c0e;
        --color-variant-text: #f2f2f4;
        --color-variant-border: #2a2a2e;
        --color-variant-hover-background: #18181b;
        --color-variant-hover-text: #ffffff;
        --color-variant-hover-border: #f2f2f4;
        --color-selected-variant-background: #f2f2f4;
        --color-selected-variant-text: #050505;
        --color-selected-variant-border: #f2f2f4;
        --color-selected-variant-hover-background: #ffffff;
        --color-selected-variant-hover-text: #050505;
        --color-selected-variant-hover-border: #ffffff;
      }

      html,
      body {
        background-color: #050505 !important;
        color: #f2f2f4 !important;
      }

      /* Barra annunci, header, menu, footer, carrello, ricerca */
      #header-group,
      #header-group .shopify-section,
      header-component,
      .header,
      .header__row,
      .announcement-bar,
      .menu-drawer,
      .shopify-section-group-footer-group,
      .footer,
      footer,
      .search-modal__content,
      .cart-drawer__dialog,
      .cart-drawer,
      dialog {
        background-color: #050505 !important;
        color: #f2f2f4 !important;
      }

      #header-group svg,
      .shopify-section-group-footer-group svg {
        color: #f2f2f4;
      }

      #header-group {
        border-bottom: 1px solid #1a1a1e;
      }

      input,
      select,
      textarea {
        background-color: #0c0c0e;
        color: #f2f2f4;
        border-color: #2a2a2e;
      }

      input::placeholder,
      textarea::placeholder {
        color: #8a8c94;
      }

      hr {
        border-color: #26262b;
      }
    </style>
  </head>

  <body class="page-width-{{ settings.page_width }} card-hover-effect-{{ settings.card_hover_effect }}">
    {% render 'skip-to-content-link', href: '#MainContent', text: 'accessibility.skip_to_text' %}
    <div id="header-group">
      {% sections 'header-group' %}
    </div>

    <script>
      // Inline header height and menu style calculations to prevent layout shift
      // Note: Updates in calculateHeaderGroupHeight(), updateTransparentHeaderOffset() and setHeaderMenuStyle() 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);
      })();

      (function setHeaderMenuStyle() {
        const headerComponent = document.querySelector('#header-component');
        if (headerComponent) {
          const isTouchDevice = 'ontouchstart' in window && navigator.maxTouchPoints > 0;
          const overflowList = headerComponent?.querySelector('overflow-list');
          const hasReachedMinimum = overflowList && overflowList.hasAttribute('minimum-reached');
          headerComponent.dataset.menuStyle = isTouchDevice || hasReachedMinimum ? 'drawer' : 'menu';
        }
      })();
    </script>

    <main
      id="MainContent"
      class="content-for-layout"
      role="main"
      data-page-transition-enabled="{{ settings.page_transition_enabled }}"
      data-product-transition="{{ settings.transition_to_main_product }}"
      data-template="{{ template }}"
    >
      {{ content_for_layout }}
    </main>

    {% sections 'footer-group' %}

    {% render 'search-modal' %}

    {% if settings.quick_add or settings.mobile_quick_add %}
      {% render 'quick-add-modal' %}
    {% endif %}

    {%- comment -%} JEANS LAB: logo 3D rotante nell'header {%- endcomment -%}
    <script id="jl-logo-3d">
(function () {
  /* ====== IMPOSTAZIONI ====== */
  var LAYERS = 10;          // quanti strati formano lo spessore
  var DEPTH = 0.9;          // px tra uno strato e l'altro (più alto = più spesso)
  var SPEED = '7s';         // durata di un giro
  var CONTINUOUS = false;   // true = gira sempre senza pause

  var SELECTORS = [
    '.header-logo img',
    'a.header-logo img',
    '[class*="header-logo"] img',
    '.header__heading-logo',
    '.header__logo img',
    'header a[href="/"] img'
  ].join(',');

  /* ====== CSS ====== */
  var CSS = [
    '.jl-logo3d{display:inline-block;perspective:900px;line-height:0;vertical-align:middle;}',
    '.jl-logo3d__spin{position:relative;display:inline-block;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;',
    '  animation:' + (CONTINUOUS ? 'jl-logo-spin-loop ' + SPEED + ' linear' : 'jl-logo-spin ' + SPEED + ' cubic-bezier(.65,0,.35,1)') + ' infinite;}',
    '.jl-logo3d__layer{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain;pointer-events:none;margin:0!important;}',
    '.jl-logo3d__back,.jl-logo3d__edge{backface-visibility:hidden;-webkit-backface-visibility:hidden;}',
    '.jl-logo3d__front{position:relative;transform:translateZ(.5px);backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 6px 14px rgba(255,255,255,.12));}',
    '@keyframes jl-logo-spin{0%,50%{transform:rotateY(0deg);}100%{transform:rotateY(360deg);}}',
    '@keyframes jl-logo-spin-loop{to{transform:rotateY(360deg);}}',
    '@media (prefers-reduced-motion:reduce){.jl-logo3d__spin{animation:none;}}'
  ].join('\n');

  function injectCSS() {
    if (document.getElementById('jl-logo3d-css')) return;
    var s = document.createElement('style');
    s.id = 'jl-logo3d-css';
    s.textContent = CSS;
    document.head.appendChild(s);
  }

  /* ====== COSTRUZIONE LOGO 3D ====== */
  function build(root) {
    injectCSS();
    (root || document).querySelectorAll(SELECTORS).forEach(function (img) {
      if (img.dataset.jl3d || img.closest('.jl-logo3d')) return;
      img.dataset.jl3d = '1';

      var stage = document.createElement('span');
      stage.className = 'jl-logo3d';
      var spin = document.createElement('span');
      spin.className = 'jl-logo3d__spin';
      img.parentNode.insertBefore(stage, img);
      stage.appendChild(spin);

      // retro (leggibile, non specchiato)
      var back = img.cloneNode(true);
      prep(back, 'jl-logo3d__back');
      back.style.transform = 'translateZ(' + (-(LAYERS + 1) * DEPTH) + 'px) rotateY(180deg)';
      spin.appendChild(back);

      // strati dello spessore (bordo cromato scuro), visti da davanti e da dietro
      for (var i = LAYERS; i >= 1; i--) {
        var shade = 'brightness(' + (0.35 + 0.4 * (1 - i / LAYERS)).toFixed(2) + ') contrast(1.2)';
        var f = img.cloneNode(true);
        prep(f, 'jl-logo3d__edge');
        f.style.transform = 'translateZ(' + (-i * DEPTH) + 'px)';
        f.style.filter = shade;
        spin.appendChild(f);

        var r = img.cloneNode(true);
        prep(r, 'jl-logo3d__edge');
        r.style.transform = 'translateZ(' + (-(LAYERS + 1 - i) * DEPTH) + 'px) rotateY(180deg)';
        r.style.filter = shade;
        spin.appendChild(r);
      }

      img.classList.add('jl-logo3d__front');
      spin.appendChild(img);
    });
  }

  function prep(el, cls) {
    el.removeAttribute('id');
    el.removeAttribute('data-jl3d');
    el.removeAttribute('fetchpriority');
    el.setAttribute('aria-hidden', 'true');
    el.setAttribute('alt', '');
    el.classList.add('jl-logo3d__layer', cls);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function () { build(); });
  } else {
    build();
  }
  // quando modifichi l'header dall'editor del tema
  document.addEventListener('shopify:section:load', function (e) { build(e.target); });
})();
    </script>
  </body>
</html>